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
);
}
但是，不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[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
;
}
