Less 在较少的内存中扩展父级和子级嵌套选择器 背景：

我试图在使用Bootstrap3作为CSS框架创建一个新项目时使用语义标记，我主要使用less的extend特性来应用Bootstrap样式。然而，当我尝试扩展嵌套选择器时，less并没有创建我期望的CSS输出

下面是我遇到的问题的一个简单例子：

HTML标记： 实际CSS输出： 问题 输出的问题是parentChildProperty将不会应用于ul元素，因为没有生成选择器nav ul。我最初的期望是少根据嵌套推断这个选择器。然而，这似乎不起作用

此外，正在生成不需要的.parent class nav ul选择器。我意识到这是因为在使用.child类扩展ul时使用了all关键字。但是，如果没有all关键字，则无法正确应用childLiProperty。理想情况下，我首选的输出将如下面的示例所示

期望输出

---

有没有什么方法可以用更少的时间实现预期的行为，或者有没有更好的方法来构造较少的样式，以实现将语义html与引导一起使用的目标？

可以通过扩展

ul

样式中的

.parent class.child class

来解决

parentChildProperty

未应用于

ul

元素的问题

这并不能解决所有问题。它仍然会在生成的CSS中留下许多不必要的选择器，但它会生成所需的CSS以允许页面正确显示

更新较少：

---

嗯，这就是

extend

和

extend all

在更少的内存中工作的方式（这两种方法对自己的更少嵌套的概念都很差）。顺便说一句，您可以通过类似的方式稍微改进CSS结果，但仅此而已。特别是，

all

的目的不是“扩展”任何嵌套的内容，而是实际扩展中具有匹配元素的所有选择器，因此，除非您准备指向w/o

all

，否则您将得到那些不必要的内容。此外，说到使用引导源作为您自己的语义CSS的框架，请参阅评论部分。（你的例子很好，变成了#5）。@seven phases max感谢你提出的关于稍微清理语法的建议。你的版本看起来有点干净。总的来说，我认为这是一个可行的解决方案。然而，添加额外的扩展仍然不像我希望的那样干净，主要是考虑到在生成的CSS中添加额外的选择器，以及进一步的可维护性。虽然这个例子很小，但在一个完整的站点上，可能有很多情况下需要使用“重复”扩展选择器included@seven-我明白你的意思，使用显式选择器并消除

all

将减少CSS中的多余选择器。但是，使用引导时，需要扩展的选择器将远远超过4个。如果有一种方法可以让less根据嵌套找到合适的选择器进行扩展，那就太好了，但这可能只是我一厢情愿的想法。除了我自己的用例，或者任何可能出现的边缘用例，我当然没有考虑太多。几乎实现可能会稍微改善这种情况。但这只是部分原因，因为（正如上面的链接中已经提到的）几乎不可能设计一个“选择器/规则集继承特性”，它可以将“非语义CSS主题框架”变成“语义CSS构造工具包库”。

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
    </ul>
</nav>    

.parent-class{
    parentProperty: value;
    .child-class { parentChildProperty: value; }
}

.child-class {
    childProperty:value;
    & > li{ childLiProperty:value; }
}

nav{
    &:extend(.parent-class all);
    ul{
        &:extend(.child-class all);
    }
}

.parent-class,
nav {
  parentProperty: value;
}
.parent-class .child-class,
nav .child-class,
.parent-class nav ul {
  parentChildProperty: value;
}
.child-class,
nav ul {
  childProperty: value;
}
.child-class > li,
nav ul > li {
  childLiProperty: value;
}

.parent-class,
nav {
  parentProperty: value;
}
.parent-class .child-class,
nav ul {
  parentChildProperty: value;
}
.child-class,
nav ul {
  childProperty: value;
}
.child-class > li,
nav ul > li {
  childLiProperty: value;
}

.parent-class{
    parentProperty: value;
    .child-class { parentChildProperty: value; }
}

.child-class {
    childProperty:value;
    & > li{ childLiProperty:value; }
}

nav{
    &:extend(.parent-class all);
    ul{
        &:extend(.child-class all);
        &:extend(.parent-class .child-class);
    }
}