Question

我正在尝试使用CSS变量。我在网上寻找教程，到目前为止所有这些都有效。

这是我的CSS：

@variables {
 defaultColor: #8E5050;
 defaultBackGround: #E1DBC3;
}
body {
 background: var(defaultBackGround);
}
a {
 color: var(defaultColor);
}

我也尝试过：

body {
 background: @defaultBackGround;
}
a {
 color: @defaultColor;
}

它们都不起作用，我做错了什么？感谢

Answer 1

我会使用CSS预处理器，例如Sass或Less。

Answer 2

您使用的变量不是正常CSS规范的一部分。看起来你正在写一些CSS框架。

如果您确实想使用纯CSS，那么每次都要手动设置颜色/边距/填充的值。但是，您喜爱的文本编辑器中的“搜索和替换”功能可以帮助您。：）

如果您想使用这些变量，@ Petah会为您提供正确的答案。：）

Answer 3

使用Native CSS3变量！

变量实际上是CSS3中的原生功能 - 您可以在MDN阅读规范。但是，它们仍然是一项相对较新的功能，因此您可能需要在使用它们之前查看浏览器支持图表here。

话虽如此，最新版本的Chrome，Firefox，Opera，Safari和Microsoft Edge都支持CSS变量。

以下代码显示了如何使用CSS变量的示例：

:root {
    --name: #ff0000;
}
p {
    color: var(--name);
}

这是如何工作的？

如果在元素的父容器上定义变量，则可以使用变量 - 这里我使用:root，以便变量可以在任何地方访问。

可以使用--name:content;定义变量，其中name是变量的名称，content是变量的内容（可以是颜色，如#ff0000，大小比如1em，或者更多可能的值之一。）

然后，只需使用var(--name)代替CSS代码中的属性，其中name再次是您称为变量的名称。

Answer 4

根据我的理解，变量尚未得到完全支持，但这就是你在以下情况下设置它们的方式：

/* declare in :root with the usual browser prefixes */
:root {
  var-myVariableColor: #f00;
  -webkit-var-myVariableColor: #f00;
  -moz-var-myVariableColor: #f00;
  -ie-var-myVariableColor: #f00;
}

/* to reference encase in var() */
body {
  background-color: var(myVariableColor);
}

使用CSS @Variables

4 个答案:

使用Native CSS3变量！

这是如何工作的？