嵌套的css规则

Question

前段时间我看到了一个css文件的例子,其中css规则/选择器以嵌套方式指定,例如:

div.a {
  color: red;
  div.b {
    font-weight: bold;
  }
}

我不确定我在哪里看到它(可能在一个SO问题中),或者它是否完全如上所示.

我的问题:以上CSS是否正确/有效？它是指定CSS规则的标准方法还是依赖于浏览器的黑客？

Answer 1

这不是有效的标准CSS,但它是使用Sass/SCSS或LESS嵌套类声明的一个例子,我相信其他的CSS扩展,在将它扩展到浏览器之前将其扩展为类似的东西(有效的CSS)使用:

div.a {
  color: red;
}

div.a div.b {
  /* Inherits color from div.a */
  font-weight: bold;
}

Answer 2

您可能要指的是LESS。

您提供的示例无效的CSS，但对LESS有效。LESS将“编译”嵌套的CSS并将其转换为有效的CSS。

Answer 3

您可以使用 SASS 嵌套规则，http://sass-lang.com/

也许就是这样？