10

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

这是我的CSS：

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

我也试过：

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

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

4

4 回答 4

20

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

于 2011-09-28T12:18:16.783 回答
8

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

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

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

于 2011-09-28T12:23:39.620 回答
5

使用原生 CSS3 变量！

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

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

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

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

这是如何运作的？

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

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

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

于 2013-12-29T22:32:09.930 回答
-1

据我了解，变量尚未完全支持，但这是您在它们存在时设置它们的方式：

/* 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);
}
于 2014-03-03T15:10:01.710 回答