LESS 中的分层/嵌套样式

Question

为了更好的可读性和更清晰的代码，我在 LESS 中使用嵌套样式，如下所示：

.item {
    .title {
        /* ... */
    }
    .content {
        /* ... */
    }
}

问题是它编译成的后代选择器，例如：

.item .title {
    /* ... */
}

据说对性能来说真的很糟糕。对于现代浏览器来说仍然如此吗？如果是这样，还有什么选择？（我的目标是组织代码，我可能真的不需要后代选择器。）

Answer 1

据我所知，.item .title 是在 .item 中 select 一个 .title 的唯一方法（@Oriol 提到的 .item > .title 可能在某些情况下也有效）。 Less 使您能够嵌套此关系。

当你不需要那个关系时，你不应该把它嵌套在你的 Less 代码中。可以使用注释来明确一组 selector 属于某个其他 selector。或者考虑 BEM 方法，参见 http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/，然后 .item .title 可以写成 item__title {}.

LESS 中的分层/嵌套样式

Hierarchical / nested styles in LESS

css

less