css的自定义属性CSS Custom Properties

总觉得使用less或者sass有点麻烦，现在原生已经开始支持自定义属性了，这是一个很好的体验哈哈哈。

一开始以为

--custom:black;

然后在下面引用

body{
    color:--custom;
}

发现并不能使用。后来查阅了一下其他资料。原来初始化的时候，要将这些写在root里面

:root {
  --custom: #ffff8c;
}

就能正常引用了。

贴上例子代码

:root {
  --first-color: #488cff;
  --second-color: #ffff8c;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #48ff32;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}