使用 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

使用原生 CSS3 变量！

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

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

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

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

这是如何工作的？

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

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

然后，只需在 CSS 代码中使用 var(--name) 而不是属性，其中 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);
}