在 less 中扩展父子嵌套选择器

Question

背景：

我在使用 Bootstrap 3 作为 CSS 框架创建新项目时尝试使用语义标记，我主要使用 less 的扩展功能来应用 bootstrap样式。但是，当我尝试扩展嵌套选择器时，less 并没有创建我期望的 CSS 输出。

这是我运行遇到的问题的一个简单示例：

HTML 标记：

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

实际CSS输出：

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

问题

输出的问题是 parentChildProperty 不会应用于 ul 元素，因为选择器 nav ul 未生成。我最初的期望是少根据嵌套来推断这个选择器。但是，这似乎不起作用。

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

期望的输出

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

是否有任何方法可以使用 less 实现预期的行为，或者是否有更好的方法来构造 less 样式以实现使用语义 html 和 bootstrap 的目标？

Answer 1

parentChildProperty 未应用于 ul 元素的问题可以通过在 ul 样式

中扩展 .parent-class .child-class 来解决

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

更新少：

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

在 less 中扩展父子嵌套选择器

extend parent and children nested selectors in less

less

背景：

HTML 标记：

更少

实际CSS输出：

问题

期望的输出

更新少：