玩轉 CSS 變數

如果當年的 css 預處理器變數對於初入前端的我來說是開啟了新世界的大門，那麼 css 變數對於我來說無疑就是晴天霹靂。其功能不但可以優雅的處理之前 js 不好處理或不適合的業務需求。更在創造力無窮的前端開發者手中大放異彩。

在前端的領域中，標準的實現總是比社群的約定要慢的多，前端框架最喜歡的 $ 被 sass 變數用掉了。而最常用的 @ 也被 less 用掉了。官方為了讓 css 變數也能夠在 sass 及 less 中使用，無奈只能妥協的使用 --。

red blue

purple

我們可以在業務專案中定義以及替換 css 變數,大家可以參考 mvp.css。該庫大量使用了 css 變數並且讓你去根據自己需求修改它。

:root

我們可以看到基於 css 變數，可以更友好的和設計師的設計意圖結合在一起。也易於修改，在業務專案中合理使用無疑可以事半功倍。

如果讓我來思考，我肯定無法想象出結合 css 預處理器 + css 變數便可以實現元件樣式的預設配置。這裡我先介紹兩個關於該功能的前置知識點:

事實上，css 變數的 var() 函式還可以使用第二個引數，表示變數的預設值。如果該變數此前沒有定義或者是無效值，就會使用這個預設值。

/* 沒有設定過 --primary-color，顏色預設使用 #7f583f */
color: var(--primary-color, #7f583f);

雖然目前 css 變數不是新的屬性，但終究不是所有的瀏覽器都支援 css 變數的，這裡我們還是要考慮一下優雅降級。

/* 對於不支援 css 變數的瀏覽器，可以採用下面的寫法。*/

a

如下所示:

// 先導入所有 less 變數
@import (reference) './var.less';
// 利用正則去替換 less 變數 為 css 變數
.theme(@property, @imp) : e(replace(@imp, '@([^() ]+)', '@', 'ig'));
@: e(replace(@imp, '@([^() ]+)', 'var(--$1, @)', 'ig'));
}

函式效果如下所示:

@import '../common/style/theme.less';
.van-button 
// => less 編譯之後生成
.van-button

我們可以看到每呼叫一次 less 函式將會被編譯成兩個屬性。第乙個屬性的設定對於不支援 css 變數的裝置可以直接使用，如果當前裝置支援 css 變數，則會使用 css 變數，但是由於當前 css 變數未定義，就會使用變數的預設值。雖然 '@button-default-height 雖然也是乙個變數，但是該變數僅僅只是 less 變數，最終生成的**中並沒有 --button-default-height 這樣的變數。此時我們就可以在使用樣式的位置或者 :root 中新增變數 --button-default-height。

這種方式更適合元件開發，因為該方案不宣告任何 css 變數，只是預留的 css 變數名稱和預設屬性。這樣的話，無論開發者的選擇器優先度有多低，**都可以很容易的覆蓋預設屬性。因為我們僅僅使用 css 的預設值。

大家可能有時候會想，這樣的話，我們不是有更多的**了嗎？其實未必，事實上我們可以直接直接在頁面內部定義變數樣式。其他元件直接通過 style 去使用頁面內的變數。當然了，事實上書寫的**多少，重點在於想要控制預設樣式的粒度大小。粒度越小，則需要在各個元件內部書寫的變數越多，粒度大，我們也就不必考慮太多。

css 沒有邏輯切換似乎是一種共識，但是我們可以利用選框(單選與多選)和 css 變數來實現判斷邏輯。我們先來看看如何使用 css 變數。

這裡因為乙個變數 --toggler 使用空格或者 initial 而產生了不同的結果，基於這樣的結果我們不難想象我們可以觸發變數的修改而產生不同的結果。

他不是乙個 bug，也不是乙個 hack。他的原理完完全全的在 css custom properties 規範中。

this value serializes as the empty string, but actually writing an empty value into a custom property, like --foo: ;, is a valid (empty) value, not the guaranteed-invalid value. if, for whatever reason, one wants to manually reset a variable to the guaranteed-invalid value, using the keyword initial will do this.

解釋如下，事實上 -foo: ; 這個變數並不是乙個無效值，它是乙個空值。initial 才是 css 變數的無效值。其實這也可以理解，css 沒有所謂的空字串，空白也不代表著無效，只能使用特定值來表示該變數無效。這個時候，我們再回頭來看原來的 css **。

.red-box

.green-box

當我們需要開發響應式**的時候，我們必須要使用**查詢 @media。先看一下用傳統的方式編寫這個基本的響應式 css：

.breakpoints-demo > * 
@media (min-width: 37.5em) and (max-width: 56.249em) 
}@media (min-width: 56.25em) and (max-width: 74.99em) 
}@media (min-width: 56.25em) 
}@media (min-width: 75em) 
}

同樣，我們可以利用 css 變數來優化**結構，我們可以寫出這樣的**：

/** 移動優先的樣式規則 */

.breakpoints-demo > *

可以看出，第二種 css **非常清晰，資料和邏輯保持在乙個 css 規則中，而不是被 @media 切割到多個區塊中。這樣，不但更容易編寫，也更加容易開發者讀。詳情可以參考 css-media-vars。該**庫僅僅只有 3kb 大小，但是卻是把整個編寫**的風格修改的完全不同。原理如下所示:

/**
* css-media-vars
* bsd 2-clause license
*/html 
/* 把當前變數變為空值 */
@media print 
}@media screen 
}@media speech 
}/* 把當前變數變為空值 */
@media (max-width: 37.499em) 
}

繼 css 鍵盤記錄器暴露了 css 安全性問題之後，css 變數又一次讓我看到了玩技術是怎麼樣的。css space toggle 技術不但可以應用於上面的功能，甚至還可以編寫 ui 庫 augmented-ui 以及掃雷遊戲。這簡直讓我眼界大開。在我有限的開發生涯中，很難找到類似於 css 這種設計意圖和使用方式差異如此之大的技術。

css 是很有趣的，而 css 的有趣之處就在於最終呈現出來的技能強弱與你自身的思維方式，創造力是密切相關的。上文只是介紹了 css 變數的一些玩法，也許有更多有意思的玩法，不過這就需要大家的創造力了。

玩轉 CSS 變數

玩轉 CSS 變數

玩轉css變數

玩轉php變數

玩轉 CSS 變數

玩轉 CSS 變數

玩轉css變數

玩轉php變數

相關推薦