css - 原生變量及使用函數 var()

零.序言

　　前兩天在逛 blog 的時候看見一些內聯樣式新奇的寫法時很納悶，雖說不上多麼熟練，可是歷來沒見過  --color: brown 這樣的寫法，百度一番以後仍然沒啥頭緒，今天偶然看到一篇文章以後才知道這是 css 變量，不由感嘆自從 V8 引擎以後花樣愈來愈多。通過翻查總結(也沒啥總結的，翻過文檔以後挺簡單的)，記錄以下：

 

1、基本用法

變量聲明：

變量聲明的時候，變量名以前加上兩根連詞線（--）便可。例如：

body {
    --foo: #7F583F;
    --bar: #F7EFD2;
}

大小寫敏感、變量名等這些參考 js 變量名規則確定不會錯，而變量名中存儲的值的書寫規則仍然採用 css 的規則，如：  --x: 20px 30px  而不是 --x: '20px 30px' 。

 

變量使用：var() 函數

var() 函數是用來讀取變量，以下例：

a {
    --foo：#f1f2f5;
    --bar: red;
    color: var(--foo);
    text-decoration-color: var(--bar);
}

 

var() 函數有第二個參數，表示變量的默認值，若是該變量不存在(第一個參數)，那麼就使用這個默認值。而且，第一個參數後面的所有算第二個參數，無論有多少個逗號，好比：

var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);

 

另外， var() 函數也可做爲其餘變量的值，但也僅做爲其餘變量的值使用：

:root {
    --primary-color: red;
    --logo-text: var(--primary-color);

    /* 無效 */   
    var(--primary-color): green;   
}

 

做用域：

同一個 CSS 變量，能夠在多個選擇器內聲明。讀取的時候，優先級最高的聲明生效。這與 CSS 的」層疊」（cascade）規則是一致的。

<style>
    :root { --color: blue; } // 這個選擇器等價於 html {}
    div { --color: green; }
    #alert { --color: red; }
    * { color: var(--color); }
</style>
<p>猜個人顏色是什麼</p>    // blue
<div>猜個人顏色是什麼</div> // green
<div id="alert">猜個人顏色是什麼</div> // red

 

2、能幫助咱們幹什麼？

　　我我的的感受就像是一個先行性方案，潛力很大，能用的地方不少，輪子慢慢造，目前我碰到的用處有：

1. 方便維護；（這樣說感受很籠統）
2. 響應式佈局；（稍微減小了點代碼量）
3. 配合 calc() 函數，完成計算；
4. ...

 

3、js 的支持

　　js 中對於 css 的變量操做以下：

// 設置變量
document.body.style.setProperty('--primary', '#7F583F’);
// 讀取變量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'
// 刪除變量
document.body.style.removeProperty('--primary');

 　　以下例：

const docStyle = document.documentElement.style;

document.addEventListener('mousemove', (e) => {
    docStyle.setProperty('--mouse-x', e.clientX);
    docStyle.setProperty('--mouse-y', e.clientY);
});

 

4、其餘

　　css 變量提供了 css 與 js 通訊的一個新的渠道，自由性相應變廣了。

　　只是就目前來說，咱們須要注意各大瀏覽器的兼容性，攤手。