twitter-bootstrap - LESS：访问级联的子级

Question

假设我在无法修改的 .less 文件中有这样的声明（实际上它在 Twitter Bootstrap 中）：

.nav-pills {
  > li {
    &.active > a,
    &.active > a:hover,
    &.active > a:focus {
      color: #fff;   
    }
  }
}

如您所见，它包括active类中 li 内锚点的样式。

我的导航current在 html 标记中使用该类用于相同的目的（我也无法修改标记）。如何使用 LESS将active声明应用于我的元素？current

先感谢您！

Answer 1

使用 LESS 1.4.0

LESS 的最新（当前为 beta）版本允许您通过如下:extend()函数执行此操作：

.nav-pills > li.current > a {
  &:extend(.nav-pills > li.active > a);
  &:hover {
    &:extend(.nav-pills > li.active > a:hover);
  }
  &:focus {
    &:extend(.nav-pills > li.active > a:focus);
  }
}

产生这个 CSS：

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus,
.nav-pills > li.current > a,
.nav-pills > li.current > a:hover,
.nav-pills > li.current > a:focus {
  color: #fff;
}

Answer 2

也许我错过了一些东西，但有没有理由不能添加和编译以下内容？

.nav-pills {
> li {
&.current > a,
&.current > a:hover,
&.current > a:focus {
  color: #fff;   
}
}
}

无需尝试更改活动代码，它不会在您的情况下使用。