iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 12
1
自我挑戰組

30 天 CSS 隨手筆記系列 第 12

30 天 CSS 隨手筆記 - 第 12 天 - CSS Variables~!!

CSS 變數已經出來一陣子了,記得年初的時候支援度還蠻慘烈的,現在則好多了:

( 來源:http://caniuse.com/#feat=css-variables )

以下主要參考 CSS Custom Properties for Cascading Variables Module Level 1 :: W3C 來筆記。

有幾個主要的特點跟用法有

  1. 可以繼承
  2. -- 開頭來命名 / 定義變數 ( 區分大小寫~!! )
  3. 用 var() 來讀取變數值

:root {
    --main-color: #06c;
}

#foo h1 {
    color: var(--main-color);
}

效果等同於

#foo h1 {
    color: #06c;
}

但這樣寫真的很方便,尤其是在主題色的使用上。

題外話,我一直有錯誤的印象,以為 twitter 的主題是用 CSS variables 寫的,但好像不是 Orz
Rachel Andrew - https://twitter.com/rachelandrew <= 主要是深紫色
Jen Simmons - https://twitter.com/jensimmons <= 主要是深藍色
不過還是很適合拿來寫~!!

另外想到的是,在 OOCSS 的命名架構裡也能用到 ( 樣式統一寫好,在不同主題下定義不同的變數就好 )。


var 的使用方法: var( <custom-property-name> [, <declaration-value> ] )
第二個值是 fallback,如果抓不到第一個變數未定義的話,會設定成第二個值。

例如:https://jsfiddle.net/lazy_shyu/jroahfvj/2/

:root {
    --main-color: #c06;
    --linear-gradient: linear-gradient(to top, var(--main-color), transparent);
}

div {
    background: var(--div-background-color, #000);
}

.div1 { --div-background-color: var(--linear-gradient); }
.div2 { --div-background-color: var(--undefined-color); }

.div2 沒有定義 --undefined-color => --div-background-color 抓不到
因此 var(--div-background-color, #000) 就會回傳黑色


https://jsfiddle.net/lazy_shyu/jroahfvj/4/

可以接受的值:

  1. string
  2. 長度
  3. 顏色
:root {
    --text: attr(class);
    --div-size: 100px;
    --main-color: #c06;
    --linear-gradient: linear-gradient(to top, var(--main-color), transparent);
}

目前覺得有點可惜的是

  1. 第二個值不能也是一個變數。
  2. 繼承的時候不能用 --x: calc(var(--x) * 2)--x: calc(var(--x) + 50px) 這種疊上去的寫法
  3. ( 很煩 D= ) 跟 SCSS 的寫法會稍微衝到,var(...) 的寫法會被轉換成字串

1 跟 2 不知道之後有沒有機會支援 XD


實作練習

目標:使用 CSS Variables 做出 bootstrap 的按鈕們

http://getbootstrap.com/css/#buttons-options

  1. 加上 html ( https://jsfiddle.net/lazy_shyu/j894xxcw/2/ )

    <button class="btn default">Default</button>
    <button class="btn primary">Primary</button>
    <button class="btn success">Success</button>
    <button class="btn info">Info</button>
    <button class="btn warning">Warning</button>
    <button class="btn danger">Danger</button>
    <button class="btn link">Link</button>
    

    還在裸奔中的狀態

  2. 預設寫成 default 的樣子 ( https://jsfiddle.net/lazy_shyu/j894xxcw/3/ )

    .btn {
        --text-color: #333;
        --theme-color--main: #fff;
        --theme-color--second: #ccc;
    
        /* ... */
        color: var(--text-color);
        border-color: var(--theme-color--second);
        background: var(--theme-color--main);
        /* ... */
    }
    
    .btn:hover {
        --theme-color--main: #e6e6e6;
        --theme-color--second: #adadad;
    }
    

    現在有了基本樣式了 ( 第一個是 hover 狀態 )

  3. 加上各個主題預設的樣式 ( https://jsfiddle.net/lazy_shyu/j894xxcw/5/ )

    .primary { --text-color: #fff;    --theme-color--main: #337ab7;     --theme-color--second: #2e6da4; }
    .success { --text-color: #fff;    --theme-color--main: #5cb85c;     --theme-color--second: #4cae4c; }
    .info    { --text-color: #fff;    --theme-color--main: #5bc0de;     --theme-color--second: #46b8da; }
    .warning { --text-color: #fff;    --theme-color--main: #f0ad4e;     --theme-color--second: #eea236; }
    .danger  { --text-color: #fff;    --theme-color--main: #d9534f;     --theme-color--second: #d43f3a; }
    .link    { --text-color: #337ab7; --theme-color--main: transparent; --theme-color--second: transparent; }
    

  4. 改用 fallback 的形式處理 default 的顏色 ( https://jsfiddle.net/lazy_shyu/j894xxcw/5/ )

    .btn {
        /* ... */
        color: var(--text-color, #333);
        border-color: var(--theme-color--second, #ccc);
        background: var(--theme-color--main, #fff);
        /* ... */
    }
    
  5. 加上各主題 hover 的樣式 ( https://jsfiddle.net/lazy_shyu/j894xxcw/6/ )

    .primary:hover { --theme-color--main: #286090;     --theme-color--second: #204d74; }
    .success:hover { --theme-color--main: #449d44;     --theme-color--second: #4cae4c; }
    .info:hover    { --theme-color--main: #31b0d5;     --theme-color--second: #269abc; }
    .warning:hover { --theme-color--main: #ec971f;     --theme-color--second: #d58512; }
    .danger:hover  { --theme-color--main: #c9302c;     --theme-color--second: #ac2925; }
    .link:hover    { --theme-color--main: transparent; --theme-color--second: transparent; }
    
  6. 最後幫 .btn.link 加上 hover 的底線樣式 ( https://jsfiddle.net/lazy_shyu/j894xxcw/7/ )

    .link:hover {
        /* ... */
        text-decoration: underline;
    }
    

然後就完成了 =D

之後想要套用在其他的 class 上的話,也可以很輕易的完成~
這邊以連結跟幽靈按鈕作為例子:https://jsfiddle.net/lazy_shyu/j894xxcw/9/

第二行:.btn.btn--ghost + 各主題的 class
第三行:.text + 各主題的 class

除了主題顏色系列以外,也可以有字體大小的系列,
例如新增 font-xs / font-sm / font-md / font-lg / font-xl 來控制。


最後,CSS variable 是可以用 js 取得 / 設定的,互動性非常高。
codepen 上就可以找到很多很有感的 demo:

  1. http://codepen.io/wesbos/pen/gPZBZQ
  2. http://codepen.io/wesbos/pen/adQjoY
  3. http://codepen.io/meowwwls/pen/OMdqoL

但目前只想到可以用在文章或版型的編輯器裡,之後想到其他應用的話再來試做看看~


上一篇
30 天 CSS 隨手筆記 - 第 11 天 - OMG... Grid Layout~!! ( 7/7 - 結語 )
下一篇
30 天 CSS 隨手筆記 - 第 13 天 - transform~!!
系列文
30 天 CSS 隨手筆記30

尚未有邦友留言

立即登入留言