層疊變量的使用方法

作者：佚名   時(shí)間：2014-07-22   分享到：

長(zhǎng)久以來(lái),變量的實(shí)用性在幾乎所有編程語(yǔ)言中得到了證明,但除了為社區(qū)實(shí)現(xiàn)而進(jìn)行的常規(guī)調(diào)用,它們從未用于css.然而,隨著css預(yù)處理器的迅速普及,新一代編碼器逐漸開(kāi)始在其樣式表及本地包含這些樣式表的調(diào)用中使用變量.
   由于css變量在最近才被提出,所以其作用域有限.一個(gè)真正的變量可以接受任何類型的值并可以被用于代碼的任何位置-例如,可以將一個(gè)選擇器一個(gè)變量.而css變量只能被賦予一個(gè)有效css值,并只能作為屬性值使用.因此,為了加以區(qū)分,它們被命名為層疊變量.
   每個(gè)層疊變量都由自定義屬性聲明:這屬性是一個(gè)由用戶定義的,以var-開(kāi)頭的屬性名;這個(gè)屬性被賦予一個(gè)值.在下面的示例中,顏色值#f00被賦給自定義屬性var-foo;
   :root{ var-foo:#foo }
   需要注意到是,這個(gè)示例使用:root選擇器聲明了這個(gè)自定義屬性.
   若要使用自定義屬性的值,則需要通過(guò)var()函數(shù)以及用戶在括號(hào)中定義的名稱(var的后一位)對(duì)其進(jìn)行調(diào)用.自定義屬性的值將作為它調(diào)用的屬性的值.例如,在下面的列表中h1元素通過(guò)兩次使用var(foo)函數(shù)來(lái)調(diào)用var-foo屬性,一次是在border-bottom屬性中,而另一次是在color屬性中,顏色值#f00將被適當(dāng)?shù)赜糜诿總�(gè)屬性.
   h1{
     border-bottom:1px solid var(foo);
     color:var(foo);
}
   層疊屬性是有作用范圍的,這意味著它們作用于聲明它們的元素及期所有子元素,本例使用:root選擇器來(lái)聲明一個(gè)自定義屬性,這意味著這個(gè)變量具有全局作用域;它可以被應(yīng)用于這個(gè)頁(yè)面中的所有元素.如果使用一個(gè)不同的選擇器,那么在自定義屬性中聲明的變量值將只作用于匹配元素的子元素.