css原生变量

1.0.0 简介

用过sass/less这类预编译工具的同学都很少再想写css，为啥？因为预编译工具带来的便利哪里只是一点点，我们可以自定义变量，函数，宏，这样灵活度很高，开发起来节省时间，大大提高开发效率。既然这么方便，为啥原生css不自己支持变量定义呢？虽然不知道以后发展会怎样，但是现在CSS工作组确实已经支持了CSS变量规范的制定。并且到现在为止已经有大部分浏览器支持了哦。

1.1.0 浏览器支持程度

我们先来看看浏览器支持情况:

目前已有91.11%支持，相信未来应用会越来越广。

2.0.0 定义与使用

2.1.0 定义：

css自定义变量就比较有意思了，以两根连词线(–)开头，然后加上变量名,即--变量名, 比如：--margvl;

2.1.1 全局与局部定义

css自定义变量同样也有全局和局部之分。

1、通常全局变量会放定义在结构伪类选择器:root{}里，如：

.root {
    --txtcolor: red;
    --subtxtcolor: green;
}

2、定义在非根节点中的变量，是局部变量，一般只有其子类才能使用这个变量。如：

1
2
3

.box {
    --boxcolor: blue;
}

2.2.0 使用

css自定义变量后，如何在需要的地方使用它呢？我们可以使用var()函数

2.2.1 var()函数的理解

形式: var(–变量名，默认值); 接受两个参数，第一个参数是传入的自定义变量的值，如果第一个参数未被定义，则默认取第二个值。具体看实例：

html: 
<div>233</div>

css: 
:root {
    --boxcolor: red;
    --boxbg: #eee;
}
div {
    width: 200px;
    height: 200px;
    text-align:center;
    line-height: 200px;
    color: var(--boxcolor, green);
    background-color: var(--boxbg);
}

运行结果如图所示，如果把 ”–boxcolor: red;“ 注释掉，则文字颜色为绿色。

2.2.2 变量值不符合逻辑时的处理

自定义设定的值如果不符合逻辑时，则会被抛弃，而取用系统默认值（不是var的第二个参数），例如：

html: 
<div>木已成舟</div> <!--黑色-->

css: 
:root {
    --colr: 20px;
}
div { 
    color: var(--colr, blue);   
}

2.2.3 calc()在css变量中的应用

自定义变量如果没有没有带单位，使用变量是不能直接拼接，比如：定义变量 –size: 60; 使用时不能直接用margin-top: var(–size)px,这样浏览器解析出来的会变成20 px，即多了一个空格。我们需要使用calc()进行计算，比如：margin-left: calc(var(--size)*1px)

2.2.4 currentColor

currentColor 是一个用来表示当前色的变量，跟着文字的颜色走，例如：

html: 
<div>我欲乘风归去，又恐琼楼玉宇</div>

css:
div {
    width: 200px;
    height: 200px;
    color: purple;
    border: 1px solid currentColor;
}

运行结果如下所示：

2.2.5 css变量和脚本结合起来

获取变量值 xx.style.getPropertyValue(变量名),只有通过xx.style.setProperty(变量名，变量值)设置值之后才能获取到
设置变量值 xx.style.setProperty(变量名，变量值);
删除变量 xx.style.removeProperty(变量名);

html: 
<div class="box">问君能有几多愁，恰似一江春水向东流</div>

css: 
:root {
    --color: pink
}
box {
    color: var(--color);
    border: 1px solid currentColor;
}

js:
var rootEl = document.documentElement;
console.info(rootEl.style.getPropertyValue('--color').trim()); // 空串
rootEl.style.setProperty('--color', 'pink');
console.info(rootEl.style.getPropertyValue('--color').trim()); //  pink
rootEl.style.removeProperty('--color');
console.info(rootEl.style.getPropertyValue('--color').trim());  // 空串

css变量能做哪些有趣的事情

到这里，我们有些迫不及待的想要把它应用起来了，其实它能做的事情太多了，先看几个小demo

案例1:

直接贴codepen链接

简单看下界面，如下图所示，一个下拉框，一个盒子，下拉框更新一种颜色，右侧盒子的边框和文字颜色也会跟着变化。

其实可以去codepen中体验下，看到这个效果是否会联想到换肤功能？代码其实很简单，如下所示：

 html:
 <select name="selColor" id="selBox">
     <option value="red">默认</option>
     <option value="green">绿色</option>
     <option value="blue">蓝色</option>
     <option value="pink">粉色</option>
     <option value="purple">紫色</option>
 </select>
 <div class="box">风萧萧兮易水寒，壮士一去兮不复还</div>

 css:
:root {
     --color: red;
 }
 div {
     width: 400px;
     height: 100px;
     color: var(--color);
     border: 1px solid currentColor;
     margin:20px auto;
 }

 js:
 var rootEl = document.documentElement;
 var selEl = document.getElementById('selBox');
 selEl.addEventListener('change', function() {
     rootEl.style.setProperty('--color', this.value);
 })

案例2

定义一个盒子，并且给一个初始的背景色，然后当光标在上方移动的时候不断改变盒子的背景颜色，可以直接进codepen体验效果。

初始效果如下：

直接上代码，简单明了：


HTML：
<div class="box" id="box"></div>


css
:root {
    --x: 0;
}
div{
    width: 200px;
    height: 200px;
    background-color: hsl(calc(var(--x)*360), 85%, 50%);
}


js:
var rootDom = document.documentElement;
var box = document.getElementById('box');

var box_w = box.clientWidth;
var box_left = box.getBoundingClientRect().left;

box.addEventListener('mousemove', function(evt) {
    var _val = (evt.clientX - box_left)/box_w;
    rootDom.style.setProperty('--x', _val);
})