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 通讯的一个新的渠道，自由性相应变广了。

　　只是就目前来说，咱们须要注意各大浏览器的兼容性，摊手。