css - CSS优化，提取公共部分？

Question

对于以下 CSS 样式：

#div a {color:red}
#div li {width:100px}
#div span {font-size:10px}

有没有办法把上面的规则写成

#div{
a {color:red}
li {width:100px}
span {font-size:10px}
}

所以只需要编写一次#div 并且易于删除或模块化网页的不同区域

Answer 1

你听说过“少”（http://lesscss.org/）这可以为你做这样的事情。

更少，您的样式代码正是您在上面编写的。

Answer 2

不，你不能用纯 CSS 做到这一点。

Answer 3

这在现在用 CSS 是不可能的（浏览器不支持这种语法），但作为开发人员，可以使用LESS或SASS（它们是最常见的）。

LESS 扩展了 CSS 的动态行为，例如变量、mixin、操作和函数。

SASS 是 CSS3 的扩展，添加了嵌套规则、变量、mixin、选择器继承等。使用命令行工具或网络框架插件将其转换为格式良好的标准 CSS。

您也可以在这里比较两者。

Answer 4

有一种方法可以做到这一点，但不是纯 css。作为替代方案，您可以使用这些：

• 较少的
• 萨斯

网络上有更多这样的超集，但 LESS 和 Sass 可能是最常见的。

语法以您要求的方式嵌套，并且与本机 css 兼容。