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

Question

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

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

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

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

原文由 ravins 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 Hasanuzzaman Sattar 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

原文由 MikeM 发布，翻译遵循 CC BY-SA 3.0 许可协议