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

Question

样式表包含大量CSS，通常包含很多重复值。我在CSS上读过一些有关变量的内容。下面我的代码是。但它不起作用

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

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

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

Answer 1

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 2

您所做的一切都正确，只需将变量保留在（在此处放置变量）

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