嵌套的CSS规则

Question

前段时间，我看到一个css文件的例子，其中css规则/选择器以嵌套的方式指定，例如，这样的事情：

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

我不知道我在哪里看到（可能在一个SO问题），或者它是否完全如上所示。

我的问题：上面的CSS是正确的还是有效的？这是指定CSS规则的标准方式吗？或者这是一种依赖于浏览器的黑客行为？

Answer 1

你可以用SASS巢规则，http://sass-lang.com/

也许这就是它？

Answer 2

这不是有效的标准CSS，但它是一个使用Sass/SCSS或LESS嵌套类声明的示例，我相信其他CSS扩展会将其扩展为像这样（这是有效的CSS），然后将其提供给要使用的浏览器：

div.a { 
    color: red; 
} 

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

Answer 3

您可能指的是LESS。

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

Answer 4

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

的建议，但我不能找到