css - 如何在 LESS CSS 嵌套类上指定 html 标签？

Question

我在 article 和 section HTML5 标签上使用了一个类。

在家里:

<article class="exit">
    <a href="exit.php">
        <figure class="box">
            <img src="assets/img/projects/exit-m.jpg" alt="">
            <figcaption>…</figcaption>
        </figure>
    </a>
</article>

在元素页面上:

<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>
   …

每个 exit 类的元素内部都有一个 figure HTML5 元素。使用 Less，我可以使用这段代码来做我想做的事。

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

但我必须指定它是文章还是部分!我有很多这样的类(class)，有点烦人……

有解决办法吗？会很酷的……

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

Answer 1

如果这两个规则不会在 exit 类中共享任何通用样式，我觉得尝试嵌套这两个规则没有多大意义。

也就是说，如果您仍想嵌套它们，请记住在选择器中，元素名称始终位于其他简单选择器之前。尝试将 & 放在元素名称之后，看看它是否有效:

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