css有了css變數這個神器,我再也不需要less和sass了
用過sass或less的都知道,主要他們可以有巢狀和變數以及函式功能,其實在原生css中,已經開始逐漸支援,誠然目前只有你我熟知,而他人還處在萌芽中,瞭解css變數,你會發現CSS從此變得異常強大。
變數的宣告
宣告變數的時候,變數名前面要加兩根連詞線(--)
// 區域性宣告
body {
--foo: #ed145b;
--bar: #F7EFD2;
}
// 全域性宣告
:root{
--foo: #ed145b;
--bar: #F7EFD2;
}
例如上面我們申明瞭2個變數:--foo和--bar,其實你只需要把它們理解成css自定義屬性看待,它們與color、font-size等正式屬性沒有什麼不同,只是沒有預設含義,注意css變數名稱是區分大小寫的,通常我們寫的css是不區分。
你可能會問,為什麼選擇兩根連詞線(--)表示變數?因為$foo被 Sass 用掉了,@foo被 Less 用掉了。為了不產生衝突,官方的 CSS 變數就改用兩根連詞線了。
命名規範
關於命名這個東西,各種語言都有些顯示,例如CSS選擇器不能是數字開頭,JS中的變數是不能直接數值的,但是,在CSS變數中,這些限制通通沒有,如:
:root {
--1: #369;
}
body {
background-color: var(--1);
}
不能包含$,[,^,(,%等字元,普通字元侷限在只要是“數字[0-9]”“字母[a-zA-Z]”“下劃線_”和“短橫線-”這些組合,但是可以是中文,日文或者韓文,例如:
body {
--深藍: #369;
background-color: var(--深藍);
}
var()函式
聲明瞭變數後我們自然是想要去獲取並且使用,那麼var()函式就是用於讀取變數
p {
color: var(--foo);
border::1px solid var(--bar);
}
var()第二個引數
color: var(--foo, #ED145B); //第二個引數就是預設值,假設--foo為空情況下,會使用#ED145B
var()函式還可以用在變數的宣告
:root {
--primary-color: red;
--logo-text: var(--primary-color); // 上面剛宣告,這裡就可以使用
}
變數值只能用作屬性值,不能用作屬性名
.foo {
--side: margin-top;
/* 很顯然,下面是無效的 /
var(--side): 20px;
}
變數值型別
如果變數值是一個字串,可以與其他字串拼接
--bar: 'hello';
--foo: var(--bar)' world';
// 示例
body:after {
content: '--screen-category : 'var(--screen-category);
}
如果變數值是數值,不能與數值單位直接連用
foo {
--gap: 20;
/
margin-top: var(--gap)px;
/ 通過calc去計算,下面有效 /
margin-top: calc(var(--gap) * 1px);
}
如果變數值帶有單位,就不能寫成字串
/ 無效 /
.foo {
--foo: '20px';
font-size: var(--foo);
}
/ 有效 /
.foo {
--foo: 20px;
font-size: var(--foo);
}
作用域
同一個 CSS 變數,可以在多個選擇器內宣告。讀取的時候,優先順序最高的宣告生效。這與 CSS 的"層疊"(cascade)規則是一致的
藍色
綠色
紅色
上面程式碼中,三個選擇器都聲明瞭--color變數。不同元素讀取這個變數的時候,會採用優先順序最高的規則,因此三段文字的顏色是不一樣的。
相容性處理
對於不支援 CSS 變數的瀏覽器,可以採用下面的寫法。
a {
color: #7F583F;
color: var(--primary); // 應該很好理解,如果這裡讀不出值,那麼並不會覆蓋上面的color
}
也可以使用@support命令進行檢測
a {
@supports ( (--a: 0)) {
/* supported /
}
@supports ( not (--a: 0)) {
/
}
JavaScript操作(精華)
JavaScript 也可以檢測瀏覽器是否支援 CSS 變數
const isSupported =
window.CSS &&
window.CSS.supports &&
window.CSS.supports('--a', 0);
if (isSupported) {
/ supported /
} else {
/ not supported */
}
JavaScript操作CSS變數的寫法如下
// 設定變數
document.body.style.setProperty('--primary', '#7F583F'); //區域性
document.documentElement.style.setProperty('--primary', '#7F583F'); //全域性
// 讀取變數
document.body.style.getPropertyValue('--primary').trim(); /區域性
document.documentElement.style.getPropertyValue('--primary').trim(); /全域性
getComputedStyle(document.documentElement).getPropertyValue('--time'); // 全域性,如果是在css表中設定的需要這種方式獲取
// '#7F583F'
// 刪除變數
document.body.style.removeProperty('--primary'); //區域性
document.documentElement.style.removeProperty('--primary'); //全域性
這意味著,JavaScript 可以將任意值存入樣式表。下面是一個監聽事件的例子,事件資訊被存入 CSS 變數
const docStyle = document.documentElement.style;
document.addEventListener('mousemove', (e) => {
docStyle.setProperty('--mouse-x', e.clientX);
docStyle.setProperty('--mouse-y', e.clientY);
});
這意味著,JavaScript 可以將任意值存入樣式表。下面是一個監聽事件的例子,事件資訊被存入 CSS 變數
const docStyle = document.documentElement.style;
document.addEventListener('mousemove', (e) => {
docStyle.setProperty('--mouse-x', e.clientX);
docStyle.setProperty('--mouse-y', e.clientY);
});
那些對 CSS 無用的資訊,也可以放入 CSS 變數
--foo: if(x > 5) this.width = 10;
上面程式碼中,--foo的值在 CSS 裡面是無效語句,但是可以被 JavaScript 讀取。這意味著,可以把樣式設定寫在 CSS 變數中,讓 JavaScript 讀取。所以,CSS 變數提供了 JavaScript 與 CSS 通訊的一種途徑。
小結
瀏覽器原生特性,無需經過任何轉譯就可直接執行
DOM物件一員,極大便利了CSS與JS之間的聯絡
並不妨礙你用Sass/Less,完全可以結合使用