将嵌套的 Selectors/Rules 扩展到父选择器

Question

我尝试将我的 CSS 写入 Less。我知道 extend-feature ，但我认为，这并不是我要找的。

少：

nav ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}

CSS输出：

nav ul {
  background: blue;
}
.inline,
nav ul {
  color: red;
}

我在找什么：

我的CSS:

.nav ul {
    color: red;
    background: blue;
}
.nav ul .inline {
    color: red;
}

我的少

.nav ul {
    background: blue;
    color: red;
    .inline {
        color: red;
    }
}

有没有明智的方法来省略第一个 color: red; 属性？

Answer 1

您可以像下面的代码片段一样使用父选择器和嵌套：

.nav ul {
    background: blue;
    &, .inline {
        color: red;
    }
}

这在编译时会产生下面的 CSS，这相当于您需要的输出。

.nav ul {
  background: blue;
}
.nav ul,
.nav ul .inline {
  color: red;
}

Extend nested Selectors/Rules to the parent Selector