CSS 變數，你的下一個設計利器(Part 1)

aokihu發表於2018-08-06
CSS變數

隨著SASS，LESS，POSTCss的流行，對原生的CSS標準也有了推動作用，雖然目前還沒有級連方式定義，但是CSS已經開始支援CSS Variables又可以稱作CSS custom properties，這樣我們不但可以複用屬性值，也能通過Javascript來動態改變，實現動畫效果。

CSS變數的定義

定義CSS變數的方法很簡單，只要加上--字首就可以了，比如設定變數size，那麼就這麼寫--size，而使用變數的時候需要使用var()這個CSS函式，來個更詳細的栗子好了

div{
    --size: 16px;
    font-size: var(--size);
}
複製程式碼

這就是使用CSS變數最簡單的方法了，不過這裡需要注意的一點是CSS變數是有作用域的，比如我這裡是在<div>中定義了--size這個變數，那麼在<a><h1><h2>...這樣的標籤中就是無法使用的，這樣使用不方便啊！總不可能在每個標籤中都這樣定義一遍吧，那怎麼做到屬性的複用呢？

那麼你是否還記得:root這個選擇子呢？沒錯，使用這個選擇子就能在根元素中設定CSS變數，相當於全域性變數了，那麼再來一個栗子吧。

:root{
    --size: 16px;
}

div {
    font-size: var(--size);
}
複製程式碼

CSS變數還有預設值的概念，還是先來看一個栗子吧

div {
    --text-color: pink;
    color: var(--text-color, black);
}
複製程式碼

很簡單，就是var()函式的第二個引數就是預設值，在--text-color沒有定義的情況下，就會使用black這個值了，那麼假如我要實現多個預設值該如何呢？再舉一個栗子吧。

div{
    --text-color1: pink;
    --text-color2: yellow;
    color: var(--text-color1, --text-color2, black);
}
複製程式碼

這樣就行了。NO！！！！這是錯誤的方法！！！！正確的應該是這麼寫

div{
    --text-color1: pink;
    --text-color2: yellow;
    color: var(--text-color1, var(--text-color2, black));
}
複製程式碼

要通過複用var()函式才能實現多個預設值。

OK，更多使用方法稍後在分解，今天到此咯

相關文章