层叠变量的使用方法

 长久以来,变量的实用性在几乎所有编程语言中得到了证明,但除了为社区实现而进行的常规调用,它们从未用于CSS.然而,随着CSS预处理器的迅速普及,新一代编码器逐渐开始在其样式表及本地包含这些样式表的调用中使用变量.
   由于CSS变量在最近才被提出,所以其作用域有限.一个真正的变量可以接受任何类型的值并可以被用于代码的任何位置-例如,可以将一个选择器一个变量.而CSS变量只能被赋予一个有效CSS值,并只能作为属性值使用.因此,为了加以区分,它们被命名为层叠变量.
   每个层叠变量都由自定义属性声明:这属性是一个由用户定义的,以var-开头的属性名;这个属性被赋予一个值.在下面的示例中,颜色值#F00被赋给自定义属性var-foo;
   :root{ var-foo:#foo }
   需要注意到是,这个示例使用:root选择器声明了这个自定义属性.
   若要使用自定义属性的值,则需要通过var()函数以及用户在括号中定义的名称(var的后一位)对其进行调用.自定义属性的值将作为它调用的属性的值.例如,在下面的列表中h1元素通过两次使用var(foo)函数来调用var-foo属性,一次是在border-bottom属性中,而另一次是在color属性中,颜色值#F00将被适当地用于每个属性.
   h1{
     border-bottom:1px solid var(foo);
     color:var(foo);
}
   层叠属性是有作用范围的,这意味着它们作用于声明它们的元素及期所有子元素,本例使用:root选择器来声明一个自定义属性,这意味着这个变量具有全局作用域;它可以被应用于这个页面中的所有元素.如果使用一个不同的选择器,那么在自定义属性中声明的变量值将只作用于匹配元素的子元素.