How to specify a html tag on a LESS CSS nested class?

问题

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);}
    }
    &section{
        .box:hover{.perspective-box(nw, 10, @exit-shadow);}
        .intro figcaption:hover{background:@exit-hover;}
    }
}

回答1:

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;}
    }
}

来源：https://stackoverflow.com/questions/12557718/how-to-specify-a-html-tag-on-a-less-css-nested-class

标签

css

less