Question

我有一个非常奇怪的问题，我不知道是否有可能在css中

假设我已经说了3个不同的css类，如下所示，你可以看到我有一个所有这些类的公共属性，我想在其他地方声明这个颜色并在这里传递一个引用，所以如果下次我想要改变我可以在一个地方改变的颜色，而不是改变所有5个类别。

我知道您可以使用body {}或包装器，但这会影响整个网站的颜色吗？有没有办法做到这一点？

这甚至可能吗？

.abc {
color:red;
}

.abc2 {
color:red;
}

.abc3 {
color:red;
}

.abc4 {
color:red;
}

.abc5 {
color:red;
}

Answer 1

坏消息：你不能用CSS做到这一点。

好消息：您可以使用像LESS这样的元CSS语言编写，然后将LESS文件处理为纯CSS。这被称为“mixin”。

很少：

@errorColor: red;

.error-color {
  color: @errorColor;
}

#error-1 {
  .error-color;
}

.all-errors {
  .error-color;
}

更多信息：http://lesscss.org/#-mixins

Answer 2

如果您想一次声明所有这些内容，可以使用：

.abc, .abc2, .abc3, .abc4, .abc5 {
  color:red;
}

或者你可以宣布一个额外的课程＆amp;添加到所有.abc，.abc2 ....＆amp;使它的颜色：红色;。

Answer 3

使用CSS无法做到这一点，但使用CSS预处理器（如LESS，SASS，SCSS或Stylus）仍然非常流行。

预处理器可以让你定义一个变量（比如$ red =＃F00）。它将用您的变量值替换CSS文档中的变量，允许您编写非常DRY和模块CSS。

Answer 4

此功能称为“CSS变量”，它是future spec的一部分，但尚未在任何浏览器上实现。

目前，在纯CSS中执行此操作的最佳方法是为所需的“全局”声明一个附加类，然后将该类添加到所有相关项。

.abc_global { color: red; }
.abc1 { /* additional styling */ }
.abc2 { /* additional styling */ }

<div class="abc1 abc_global"></div>
<div class="abc2 abc_global"></div>

Answer 5

LESS

您可以定义一次红色：

.myRedColor {

color:red;

}

现在你可以在任何CSS样式上调用红色。甚至NESTED风格！这是一个邪恶的工具！

.abc1 {

 .myRedColor;

}
.abc2 {

 .myRedColor;

}
.abc3 {

 .myRedColor;

}
.abc4 {

 .myRedColor;

}

嵌套示例：

  .abc {

    .itsEasyAsOneTwoThree{
       .myRedColor;

    }

   }

现在我们所有正确嵌套在“abc”类中的“itsEasyAsOneTwoThree”类都将被赋予红色样式。不再记得那些长＃867530颜色代码:)那有多酷？！

声明一个全局CSS属性？这可能吗？

5 个答案: