css中的组级联

Question

我想知道CSS中是否有可以用来将定义分组到某个级联中的功能。

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

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

但是，有没有可能这样做：

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

我的灵感来自于CSS中的@media-queries。

Answer 1

当你可以用纯CSS轻松做到这一点时，为什么要使用Sass或更少呢？

​

.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 ...etc→→嵌套