css变量(自定义属性)实践指南
Sass和Less这样的预处理器，让我们的CSS代码保持良好的结构和可维护性。像变量、混合(mixins)、循环控制等特性，增强了动态编写CSS的能力，从而减少重复代码，也加快了我们开发速度。
近年来，ingvariable)的部分，由通过val()来使用你的自定义属性组成，开起来像这样：
|var(--my-cool-background);
自定义属性作用于CSS选择器中，val()可被当成一个真正的CSS属性一样使用。
:root{--my-cool-background:#73a4f4;}/*CSS文件的其他部分*/#foo{background-color:var(--my-cool-background);}
上面的代码片段把--my-cool-background这个自定义属性的作用域定义在:root这个伪类中，这让该自定义属性能被全局访问到(即在＜html＞标签内部的任何地方)。然后，使用val()函数把ID为foo的容器的background-color设置为自定义属性的值，这时该容器就有了浅蓝的背景色。
这还没完。你可以用同样的浅蓝色，给多个HTML标签的多种可以设置颜色值的地方设值，比如设置它们的color和border-color。方法很简单，就是通过var(--my-cool-background)拿到自定义属性的值，然后给合适的CSS属性设置上去。(当然，在事情变得复杂之前，我建议思考一下你的CSS变量命名规范)：
|p{color:var(--my-cool-background);}
你还可以从通过利用CSS变量获得另一个CSS变量的值。例如：
|--top-color:orange;--bottom-color:yellow;--my-gradient:linear-gradient(var(--top-color),var(--bottom-color));
上面的代码创建了一个--my-gradien变量，是一个渐变样式，它的值被设为--top-color的值和--bottom-colo的值组合的结果。现在，你可以在任何时候修改你的渐变样式，仅仅是修改变量的值就可以了，而不再需要在样式表里满文件地去找用到这个渐变样式地方。
最后，你可以在CSS变量中加入一个或多个备用值(fallbackvalue/s)，例如:|var(--main-color,#333);
上面的代码中，#333是一个备用值。当自定义属性值无效或未指定(unset)时，如果这时也没有指定备用值，那么被继承的(inherited)属性值将会被使用。
承的(inherited)属性值将会被使用。
CSS变量是区分大小写的
与普通CSS属性不同，CSS变量是区分大小写的。
例如，var(--foo)和var(--FOO)是在求两个不同的自定义属性值，分别是-foo和--FOO的。
CSS变量受级联关系影响
和普通CSS属性一样，CSS变量是可继承的。例如，我们定义了一个属性，值为Dlue:
|:root{--main-color:blue;}
当你给任意在<html>标签里的元素指定--main-color变量时，它们都会继承至到blue这个值。
当你在另一个元素里，为改自
CSS变量(自定义属性)实践指南 来自淘豆网m.daumloan.com转载请标明出处.
