嵌套的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/

嵌套规则

也许就是这样？

Answer 4

似乎在https://tabatkins.github.io/specs/css-nesting/

有提案

但我无法找到它的状态