css变量使用

CSS中的变量给了我们诸多优点：方便、代码重用、更可靠的代码库和提升防错能力。（此句转）

变量虽好用，但是兼容是在不怎么样：点这里查看。

一、变量的声明

:root {
  --base-font-size: 16px;
  --link-color: #6495ed;
  --base-color: #fff;
}
body {
  --foo: #7F583F;
  --bar: #F7EFD2;
}

上面代码在根元素和body上声明了变量，声明变量的时候，变量名前面要加两根连词线（--）。

变量名大小写敏感，--header-color和--Header-Color是两个不同变量。

二、var() 函数

var()函数用于读取变量。

#box{
    background: var( --link-color );
    color: var( --base-color );
}

var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

color: var(--base-color, #7F583F);

var()函数还可以用在变量的声明。

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

三、变量值的类型

如果变量值是一个字符串，可以与其他字符串拼接。

--bar: 'hello';
--foo: var(--bar)' world';

如果变量值是数值，不能与数值单位直接连用。必须使用calc()函数，将它们连接。

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}

四、兼容性处理

a {
  color: #7F583F;
  color: var(--primary);
}

五、JavaScript 操作

// 设置变量
document.body.style.setProperty('--primary', '#7F583F');

// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// 删除变量
document.body.style.removeProperty('--primary');

 

参考：

http://www.ruanyifeng.com/blog/2017/05/css-variables.html?utm_source=tuicool&utm_medium=referral

http://blog.csdn.net/u011043843/article/details/46480677