css全局变量“( property ) :(value)”声明中冒号(':')前缺少属性名称

Question

我想在css中创建一个全局变量我已经在网上找过了，每个网站都说要声明一个css变量，你最常做的事情是:根{ --variableName: property；}根据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)声明中的冒号(':')前缺少属性名？