使用 CSS 自定义属性变量不起作用答案

【问题标题】：using css custom properties variables not working使用 CSS 自定义属性变量不起作用
【发布时间】：2018-02-05 02:39:37
【问题描述】：

样式表有大量的 CSS，通常有很多重复的值。我在某处读到关于 CSS 中的变量。我的代码下面是 .但它不起作用

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

我在这里使用变量，但它不起作用

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

这不适用于 chromium-edge 浏览器 06/2021
它也不适用于 Firefox、Chrome、Opera 和 Microsoft Edge 浏览器。我遇到了提问者遇到的同样问题并应用了你的建议，但它在任何浏览器上都不起作用，所以我只是直接插入我的颜色而不是这样做，它就起作用了。 9/2022

【解决方案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: ... }）也可以用来定义变量

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

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

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

【讨论】：