将嵌套选择器/规则扩展到父选择器

Question

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

THE Less：

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

CSS输出：

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

我在寻找什么：

我的CSS：

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

我的收入

color: red;

是否有一种明智的方法可以省略第一个npm start属性？

Answer 1

您可以使用父选择器并嵌套，如下面的代码段所示：

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

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

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