玩轉css變數

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

"height: 100px; width: 100px"
class="red-box"
>
"height: 100px; width: 100px"
class="green-box"
>

這裡因為乙個變數 --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

新式**查詢

.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變數

相關推薦