如何将CSS自定义变量用于属性

Question

我的样式表有大量的样式声明，通常具有很多重复值。我阅读了有关CSS中的变量以解决该问题。

我尝试使用它们，但它不起作用：

element {
      --main-bg-color: brown;
    }
body {
  background-color: var --main-bg-color;
}

我在做什么错？

Answer 1

您做对了所有事情，只需将变量保留(在此处放置(

element {
  --main-bg-color: brown;
}
body {
  background-color: var(--main-bg-color);
}

Answer 2

var()符号就像方法

var(<custom-property-name>)

可能会考虑将变量放在:root选择器中...

:root {
  --main-bg-color: brown;
}
/* The rest of the CSS file */
body {
  background-color: var(--main-bg-color);
}

:root与全局范围相似，但是元素本身(IE body { --myvar: ... }(或祖先元素(IE html { --myvar: ... }(也可以用于定义变量

Answer 3

请参阅MDN参考页面。简单，要使用自定义变量，您需要将它们放置在:root选择器中：

:root {
  --main-bg-color: brown
}

为了在另一个选择器中使用它，请使用var()：

body {
  background-color: var(--main-bg-color)
}

Answer 4

对我来说，问题是@charset "UTF-8";不是CSS文件中的第一个字符，这使:root{--my-variable: large }混乱了。

Answer 5

使用变量时需要添加 var(--my-variable)。

但这不是您应该使用CSS自定义属性(变量(的东西。

牢记一些浏览器无法理解CSS变量，最明显的是。因此，使用任何前处理器将更好地兼容，因为它们已编译为常规CSS值。要么萨斯，更少的邮政编码...无论您的船漂浮着什么。

css自定义属性比处理前的属性要强大得多，因为它们可以在运行时使用JavaScript更改并以各种很棒的方式使用，但是当您将其用作常规变量时，Pre Procosessor变量总是更好地兼容。

Answer 6

如果您想在全球范围内声明它们，我建议在以下方式使用它： * { --var : #colorName; }。这实际上对我的角度应用有所帮助。