嵌入CSS样式？

Question

我很好奇是否有办法做这样的事情：

#sidemenu {
  .unlocked {
    color: blue;
  }

  .locked {
    color: red;
  }
}

而不是像以下那样写出来：

#sidemenu .unlocked {
    color: blue;
}

#sidemenu .locked {
    color: red;
}

Answer 1

你原生不能拥有这样的CSS，但你最初可以使用CSS预处理器编写它，例如LESS和SASS。然后将代码编译为普通的CSS。

Answer 2

从vanilla css切换到SASS/SCSS或LESS。

这是vanilla CSS和SCSS之间的一个小例子：

Vanilla CSS：

cmd

<强> SCSS：

#sidemenu .unlocked {
    color: blue;
}

#sidemenu .locked {
    color:red;
}

正如Scott上面提到的那样，SASS / SCSS / LESS一旦被渲染就会被重新编译为Vanilla CSS。