css - 原生变量及使用函数 var()

零.序言

　　前两天在逛 blog 的时候看见一些内联样式新奇的写法时很纳闷，虽然说不上多么熟练，但是从来没见过  --color: brown 这样的写法，百度一番之后仍然没啥头绪，今天偶然看到一篇文章之后才知道这是 css 变量，不禁感叹自从 V8 引擎之后花样越来越多。经过翻查总结(也没啥总结的，翻过文档之后挺简单的)，记录如下：

 

一、基本用法

变量声明：

变量声明的时候，变量名之前加上两根连词线（--）即可。例如：

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

 

二、能帮助我们干什么？

　　我个人的感觉就像是一个先行性方案，潜力很大，能用的地方很多，轮子慢慢造，目前我碰到的用处有：

1. 方便维护；（这样说感觉很笼统）
2. 响应式布局；（稍微减少了点代码量）
3. 配合 calc() 函数，完成计算；
4. ...

 

三、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);
});

 

四、其他

　　css 变量提供了 css 与 js 通信的一个新的渠道，自由性相应变广了。

　　只是就目前来讲，我们需要注意各大浏览器的兼容性，摊手。

转载于:https://www.cnblogs.com/cc-freiheit/p/11400164.html