你做的每件事都对，只是保留变量（把变量放在这里）

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

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

参考MDN reference page。简单地说，要使用自定义变量，您需要将它们放在:root选择器中：

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

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

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

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

如果您想全局声明它们，我建议在以下情况下使用：* { --var : #colorName; } .这实际上在Angular 应用方面对我有帮助。

使用变量时，需要添加var(--my-variable)。
但这不是您应该使用CSS自定义属性（变量）的目的。
请记住some browser can't understand CSS variables，最明显的是IE。所以使用任何预处理器都会更好地兼容，因为它们会被编译成常规的CSS值。无论是SASS、LESS还是POSTCSS......都可以。
CSS自定义属性比预处理器的要强大得多，因为它们可以在运行时用javascript修改，并以各种各样的方式使用，但是当你把它们作为常规变量使用时，预处理器变量总是更好的兼容性。