将parent和children嵌套选择器扩展为less

Question

背景

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

以下是我遇到的问题的一个简单示例：

HTML标记：

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

LESS

.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来启用预期的行为，或者是否有更好的方法来构造较少的样式来实现使用带引导程序的语义html的目标？

Answer 1

parentChildProperty无法应用于ul元素的问题可以通过在.parent-class .child-class样式中扩展ul来修复

这不会解决所有问题。它仍会在生成的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);
    }
}