css变量使用

在css中使用变量的语法：

:root {
  --ylyblue:red;
}
body {
  --ylyblue: green;
}
.lab{
    --ylyblue:plum;
}
a{
    color:var(--ylyblue);
    /*color:currentColor;*/
}

<ul class="lab">
    <li>
        <a href="#">首页</a>
    </li>
</ul>

输出结果：“首页”二字是紫色的，
若没有 .lab{ –ylyblue:plum; } 则是绿色，依次类推。
注：此语法格式，变量名前必须有“–”，使用时需加var。

另外，currentColor 是一个关键字，是当前的标签所继承的文字颜色。

经过测试，css变量的浏览器兼容性的确不好，chrome 51，Firefox 50可以正常显示。Safari 5.1，IE11均不生效。

有资料说，css变量的浏览器兼容性不好，供参考（原文：http://www.2cto.com/kf/201506/407972.html#）：