前端開發:CSS變量知識

編程語言 CSS JavaScript 科技 前端那些事 2017-08-03

這個重要的 CSS 新功能,所有主要瀏覽器已經都支持了。本文全面介紹如何使用它,你會發現原生 CSS 從此變得異常強大。

一、變量的聲明

聲明變量的時候,變量名前面要加兩根連詞線(--

前端開發:CSS變量知識

上面代碼中,body選擇器裡面聲明瞭兩個變量:--foo--bar .

它們與color、font-size等正式屬性沒有什麼不同,只是沒有默認含義。所以 CSS 變量(CSS variable)又叫做“CSS 自定義屬性”(CSS custom properties)。因為變量與自定義的 CSS 屬性其實是一回事。

你可能會問,為什麼選擇兩根連詞線(--)表示變量?因為$foo被 Sass 用掉了,@foo被 Less 用掉了。為了不產生衝突,官方的 CSS 變量就改用兩根連詞線了。

各種值都可以放入 CSS 變量。

前端開發:CSS變量知識

變量名大小寫敏感,--header-color-Header-color是兩個不同變量

二、var() 函數

var()函數用於讀取變量。

前端開發:CSS變量知識

var()函數還可以使用第二個參數,表示變量的默認值。如果該變量不存在,就會使用這個默認值。

前端開發:CSS變量知識

第二個參數不處理內部的逗號或空格,都視作參數的一部分。

前端開發:CSS變量知識

var()函數還可以用在變量的聲明。

前端開發:CSS變量知識

注意,變量值只能用作屬性值,不能用作屬性名。

前端開發:CSS變量知識

上面代碼中,變量--side用作屬性名,這是無效的

三、響應式佈局

CSS 是動態的,頁面的任何變化,都會導致採用的規則變化。

利用這個特點,可以在響應式佈局的media命令裡面聲明變量,使得不同的屏幕寬度有不同的變量值。

前端開發:CSS變量知識

四、兼容性處理

對於不支持 CSS 變量的瀏覽器,可以採用下面的寫法。

前端開發:CSS變量知識

也可以使用@support命令進行檢測。

前端開發:CSS變量知識

五、JavaScript 操作

JavaScript 也可以檢測瀏覽器是否支持 CSS 變量。

前端開發:CSS變量知識

JavaScript 操作 CSS 變量的寫法如下。

前端開發:CSS變量知識

這意味著,JavaScript 可以將任意值存入樣式表。下面是一個監聽事件的例子,事件信息被存入 CSS 變量。

前端開發:CSS變量知識

那些對 CSS 無用的信息,也可以放入 CSS 變量。

前端開發:CSS變量知識

上面代碼中,--foo的值在 CSS 裡面是無效語句,但是可以被 JavaScript 讀取。這意味著,可以把樣式設置寫在 CSS 變量中,讓 JavaScript 讀取。

切版 qieban(.cn)

相關推薦

推薦中...