使用 css 自定义属性变量不起作用

Question

style sheet 有非常多的 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

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

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

请记住 some browser can't understand CSS variables，最明显的是 IE。因此，使用任何预处理器代替都会更好地实现兼容性，因为它们被编译为常规 CSS 值。 SASS、LESS、POSTCSS... 随心所欲。

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

Answer 4

你做的一切都对，只是把变量放在里面（把变量放在这里）

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

Answer 5

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

using css custom properties variables not working