CSS全局变量在“（property）”：（value）声明中的冒号（'：'）之前缺少属性名称。

Question

我想在css中创建一个全局变量我已经在网上寻找了如何做的方法，每个网站都说要声明一个css变量，您最常执行以下操作 ：根{   --variableName：属性； }根据https://medium.freecodecamp.org/everything-you-need-to-know-about-css-variables-c74d922ea855 但是，在Visual Studio中，我收到以下错误消息：在“（property）”：（value）“声明中的冒号（'：'）之前缺少属性名称？

这是我的代码。

:root{
 --main-color:#4d4e53;
 --main-bg: rgb(255, 255, 255);
 --logo-border-color: rebeccapurple;

  --header-height: 68px;
  --content-padding: 10px 20px;

 --base-line-height: 1.428571429;
 --transition-duration: .35s;
 --external-link: "external link";
 --margin-top: calc(2vh + 20px);

  --foo: if(x > 5) this.width = 10;
}

为什么Visual Studio在“（property）”：（value）声明中的冒号（'：'）之前说缺少属性名？

Answer 1

在CSS顶部定义您的自定义属性，例如：

Style Attribute{
    --PrimaryColour : #71b220;
    --SecondaryColour: #FFFFFF;
    --TertiaryColour: #337ab7;
}

然后您可以创建类，并在程序中使用它们，例如：

.PrimaryColour{ color:var(--PrimaryColour); }