使用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,那么每次都要手动设置颜色/边距/填充的值.但是,您喜爱的文本编辑器中的"搜索和替换"功能可以帮助您.:)

如果你想使用这些变量,@ Petah有适合你的答案.:)

Answer 3

使用Native CSS3变量!

变量实际上是CSS3中的本机功能 - 您可以在MDN上阅读规范.然而,他们仍然是一个相对较新的功能,所以你可能要检查出的浏览器支持图表这里使用它们之前.

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

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

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

这是如何运作的？

如果它们是在元素的父容器上定义的,则可以使用变量 - 这里我使用:root变量可以随处访问变量.

可以使用--name:content;where name变量的名称定义变量,content是变量的内容(这可以是颜色,如#ff0000大小1em,或更多可能的值之一).

然后,只需var(--name)在CSS代码中使用而不是属性,这里name再次是您称为变量的名称.