使用CSS @Variables

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，你每次都需要手动设置颜色/页边距/填充的值。但是在你最喜欢的文本编辑器中，一个好的“搜索和替换”-function可能会对你有所帮助。:)

如果你想使用这些变量，@Petah为你找到了正确的答案。:)

Answer 3

使用原生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，或更多可能的值之一)。

然后，只需在CSS代码中使用var(--name)而不是属性，其中name也是您调用变量的名称。