组在css级联

Question

我想知道CSS中是否有一个功能可用于对某个级联中的定义进行分组。

通常在CSS中我会执行以下操作：

.class .inner1 {}
.class .inner2 {}
.class .inner3 {}

但是有可能做以下事情：

.class {
    .inner1 {}
    .inner2 {}
    .inner3 {}
}

我受到了@media - CSS中存在的查询的启发。

Answer 1

为什么在使用纯CSS时可以轻松使用Sass或Less？

.class [class*="inner"] {
  color: red;
}

.inner1 {
  font-size: 26px;
  margin-bottom: 15px
}

.inner2 {
  font-size: 18px;
  margin-bottom: 10px
}

.inner3 {
  font-size: 10px
}

<div class="class">
  <div class="inner1">CSS</div>
  <div class="inner2">WILD</div>
  <div class="inner3">CARD</div>
</div>

Answer 2

你可以用SCSS / SASS和/或LESS做到这一点，它还提供其他优点，如变量，混合等。

Answer 3

您可以使用像SASS这样的CSS预处理器来执行此操作：

.class {
    .inner1 {}
    .inner2 {}
    .inner3 {}
}

将输出

.class {}
.class .inner1 {}
.class .inner2 {}
.class .inner3 {}

您可以继续从.class→.inner1→span ...等

进行嵌套

Answer 4

如果您想在.css源文件中执行此操作，则必须使用和Post {PostCSS等插件。

编译的CSS当前不能包含嵌套选择器，但有postcss-nested因此将来可能会这样。