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

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。这称为“混合”。

不到：

@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;
}

或者您可以声明一个附加类并添加到所有 .abc、.abc2.... 并使其颜色：红色；。

Answer 3

这不能用 CSS 完成，但通过使用 CSS 预处理器（如 LESS、SASS、SCSS 或 Stylus）仍然是非常流行的事情。

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

Answer 4

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

目前，在纯 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

少_

您可以定义一次红色：

.myRedColor {

color:red;

}

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

.abc1 {

 .myRedColor;

}
.abc2 {

 .myRedColor;

}
.abc3 {

 .myRedColor;

}
.abc4 {

 .myRedColor;

}

嵌套示例：

  .abc {

    .itsEasyAsOneTwoThree{
       .myRedColor;

    }

   }

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

Answer 6

您还可以将 PostCSS 与插件一起使用postcss-preset-env并支持自定义属性/变量，然后使用:root选择器添加全局 css 变量。

:root {
  --color-gray: #333333;
  --color-white: #ffffff;
  --color-black: #000000;
}