使用css自定义属性变量无效

Question

样式表具有非常大量的CSS，通常具有大量重复值。我在某处读到了CSS中的变量。我的代码下面是。但它无法正常工作

element {
      --main-bg-color: brown;
    }

我在这里使用变量，但它无法正常工作

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

Answer 1

请参阅MDN reference page。简而言之，要使用自定义变量，您需要将它们放在:root选择器中：

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

要在其他选择器中使用它，请使用var()：

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类似于全局范围，但元素本身（即body { --myvar: ... }）或祖先元素（即html { --myvar: ... }）也可用于定义变量

Answer 3

你做的一切都正确，只需将变量保存在（把变量放在这里）

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

Answer 4

使用vars时，您需要添加 var（ - my-variable ）。

但是你不应该使用CSS自定义属性（/变量）来实现。

请记住some browser can't understand CSS variables，最明显的是IE。因此，使用任何预处理器都会更好，因为它们被编译为常规CSS值。无论是SASS，LESS，POSTCSS ......无论什么漂浮在你的船上。

CSS自定义属性比预处理属性强大得多，因为它们可以在运行时使用javascript进行更改并以各种各样的方式使用，但是当您将它们用作常规变量时，预处理器变量总是更好的兼容性。

Answer 5

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