CSS变量入门总结

Posted on Edited on

CSS变量如同less的@变量名:变量值，可以定义后使用，方便使用和维护。

定义

定义使用两根连词线--，如

1
2
--foo: #eee;
--bar: 16px;

变量名对大小写敏感。

读取

使用var()函数读取变量

1
2
3
4
body{
     --foo:#222;
     color:var(--foo);
}

var()函数还可以使用第二个参数，表示默认值。第二个函数不处理逗号和空格。
var()函数也可以用作定义时的属性值。
--foo：var(--bar);

类型

  1. 字符串
    可以与其他字符串拼接
  2. 数值
    不能直接与数值单位连用，必须使用calc()函数
    如果变量值带单位，就不能写成字符串
1
2
/* 错误示范 */
--foo: '1px';

作用域

与CSS类似，可以在多个选择器内定义，优先级高的会层叠在优先级低的上。
根元素是:root