I have a class used on an article
and a section
HTML5 tag.
On the home:
<article class="exit">
<a href="exit.php">
<figure class="box">
<img src="assets/img/projects/exit-m.jpg" alt="">
<figcaption>…</figcaption>
</figure>
</a>
</article>
On the project page:
<section class="page project exit">
<div class="corner nw intro">
<figure class="box">
<img src="assets/img/projects/exit.jpg" alt="">
<figcaption>…</figcaption>
</figure>
</div>
…
Each elements with the class exit have a figure
HTML5 element inside. With Less, I use this code to do what I want.
article.exit{width:260px; height:200px; top:315px; left:505px;
figure{background-color:@exit-bg;}
.box:hover{.perspective-box(se, 10, @exit-shadow);}
}
section.exit{
.box:hover{.perspective-box(nw, 10, @exit-shadow);}
.intro figcaption:hover{background:@exit-hover;}
}
But I have to specify if it's an article
or a section
! I have a lot of classes like that and it's a little annoying…
Is there a solution to do something like this? It will be very cool…
.exit{
&article{
width:260px; height:200px; top:315px; left:505px;
figure{background-color:@exit-bg;}
.box:hover{.perspective-box(se, 10, @exit-shadow);}
}
§ion{
.box:hover{.perspective-box(nw, 10, @exit-shadow);}
.intro figcaption:hover{background:@exit-hover;}
}
}
I kinda don't see much of a point in trying to nest these two rules if they won't share any common styles within the exit
class.
That said, if you still want to nest them, remember that in selectors, element names always precede other simple selectors. Try placing the &
after the element name and see if it works:
.exit{
article&{
width:260px; height:200px; top:315px; left:505px;
figure{background-color:@exit-bg;}
.box:hover{.perspective-box(se, 10, @exit-shadow);}
}
section&{
.box:hover{.perspective-box(nw, 10, @exit-shadow);}
.intro figcaption:hover{background:@exit-hover;}
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With