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

我试着把CSS写得更少。我知道，但我想，这不是我想要的

较少的：

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

---

有没有明智的方法来省略第一种颜色：红色属性？

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

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

当编译时，将生成与所需输出等效的以下CSS

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

---

是的，就是这样，这么简单，我甚至都没想到