将CSS行合并为一行

Question

我想定义一些我可以组合的基本样式。假设我有一个包含以下行的样式表：

.whitebackground  {background-color: #ffffff}
.borderblue       {border: solid 1px #0000aa}

我想知道是否有办法将这些行包含在新行中？类似的东西：

**div.main   {.whitebackground; .borderblue}**

结果必须与此行相同：

div.main  {background-color: #ffffff; border: solid 1px #0000aa}

Answer 1

您正在寻找SASS或LESS图书馆。

它们允许您将样式声明从一个选择器包含到另一个选择器中。

使用LESS，您的语法将完全有效并可按您的需要工作

div.main   {
   .whitebackground; 
   .borderblue;
}

但是，当它们被编译时，它将自动采用优化形式。

Answer 2

使用标准CSS，你不能。但是，你可以给你的div多个类。

<div class="whitebackground borderblue">

这会将两组css应用于div。

顺便说一下，如果我处于迂腐的态度，我会说像“whitebackground”和“borderblue”这样的名字不是很好的类名。对于这样的类，您也可以使用内联样式。类名应该传达意义，意图，结构，重点等。使用诸如“特别注释”，“重要”，“旁注”，“突出显示”之类的名称或者你为div赋予白色背景和蓝色边框的任何理由