CSS之变量var

• 变量是个好东西
• CSS变量var()语法
• • Question

变量是个好东西

在任何语言中，变量的有一点作用都是一样的，那就是可以降低维护成本，附带还有更高性能，文件更高压缩率的好处。

随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行，CSS工作组迅速跟进CSS变量的规范制定，并且，很多浏览器已经跟进，目前，在部分项目中已经可以直接使用了。

Chrome/Firefox/Safari浏览器兼容性明显超于Opera/iOS

CSS变量var()语法

CSS中原生的变量定义语法是：

--*

，变量使用语法是：

var(--*)

，其中

*

表示我们的变量名称。关于命名这个东西，各种语言都有些显示，例如CSS选择器不能是数字开头，JS中的变量是不能直接数值的，但是，在CSS变量中，这些限制通通没有

:root {
  --1: #369;
}
body {
  background-color: var(--1);/* #369 */
}
           

但是，不能包含

$，[，^，(，%

等字符，普通字符局限在只要是“数字[

0-9

]”“字母[

a-zA-Z

]”“下划线

_

”和“短横线

-

”这些组合，但是可以是中文，日文或者韩文，例如：

body {
  --深蓝: #369;
  background-color: var(--深蓝);
}
           

所以，我们就可以直接使用中文名称作为变量，即使英语4级没过的小伙伴也不会有压力了，我们也不需要随时挂个翻译器在身边了。

无论是变量的定义和使用只能在声明块{}里面，例如，下面这样是无效的：

--深蓝: #369;
body {
  background-color: var(--深蓝);
}
           

变量的定义，或者说声明跟CSS计数器的声明类似的，你应该摆脱Sass/Less等预编译工具语法先入为主的语法影响，把CSS的原生变量理解为一种CSS属性。

这样，你就对其权重和变量应用规则要容易理解地多。

Question

• CSS属性名可以走变量吗？不可以
• CSS变量支持同时多个声明吗？不可以

:root{
	--blue: #007bff;
 	--indigo: #6610f2;
  	--purple: #6f42c1;
  	--pink: #e83e8c;
  	--red: #dc3545;
  	--orange: #fd7e14;
  	--yellow: #ffc107;
  	--green: #28a745;
  	--teal: #20c997;
  	--cyan: #17a2b8;
  	--white: #fff;
  	--gray: #6c757d;
  	--gray-dark: #343a40;
  	--primary: #007bff;
  	--secondary: #6c757d;
  	--success: #28a745;
  	--info: #17a2b8;
  	--warning: #ffc107;
  	--danger: #dc3545;
  	--light: #f8f9fa;
  	--dark: #343a40;
  	--breakpoint-xs: 0;
  	--breakpoint-sm: 576px;
  	--breakpoint-md: 768px;
  	--breakpoint-lg: 992px;
  	--breakpoint-xl: 1200px;
  	--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  	--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

}