CSS中的变量使用，var()语法
惯例先看代码：
:root{
--white-max: #fff;
--white-bright: #f5f5f5;
--white-light: #eee;
--white-dark: #ddd;
}
.navbar ul>li>a{
color: var(--white-max);
font-size: 1.1em;
font-weight: bold;
}
.panel.panel-zxzx a:hover{
color: var(--white-max);
}
由着代码逐渐深入了解每一个关键字的意思
:root
文档的根元素，这是一个放自定义属性的好地方，因为我们可以根据其他个别特别的样式的选择性来覆盖自定义属性
css自定义变量的语法是--*
var（）
为了应用自定义属性，我们使用var（）
CSS中原生的变量定义语法是：--*，变量使用语法是：var(--*)，其中*表示我们的变量名称。关于命名这个东西，各种语言都有些显示，例如CSS选择器不能是数字开头，JS中的变量是不能直接数值的，但是，在CSS变量中，这些限制通通没有，如：
:root {
--1: #369;
}
body {
background-color: var(--1);
}
但是，不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合，但是可以是中文，日文或者韩文，例如：body {
--深蓝: #369;
background-color: var(--深蓝);
} 注意：自定义属性是大小写敏感的（和普通的CSS规则不一样） 所以，我们就可以直接使用中文名称作为变量，即使英语4级没过的小伙伴也不会有压力了，我们也不需要随时挂个翻译器在身边了。 无论是变量的定义和使用只能在声明块 --深蓝: #369;
body {
background-color: var(--深蓝);
} 变量的定义，或者说声明跟CSS计数器的声明类似的，你应该摆脱Sass/Less等预编译工具语法先入为主的语法影响，把CSS的原生变量理解为一种CSS属性。 这样，你就对其权重和变量应用规则要容易理解地多。 例如下面这个例子： :root { --color: purple; } div { --color: green; } #alert { --color: red; } * { color: var(--color); } 上面这个例子我们可以获得这些信息：
CSS属性名可以走变量吗？类似下面这样： body {
--bc: background-color;
var(--bc): #369;
} 答案是“不可以”，要是可以支持的话，那CSS的压缩可就要逆天了，估计所有的属性都会变成1~2个字符。 CSS变量支持同时多个声明吗？ 类似下面这样： CSS变量使用完整语法 意思就是，如果我们使用的变量没有定义（注意，仅限于没有定义），则使用后面的值作为元素的属性值。举个例子： .box {
--1: #369;
}
body {
background-color: var(--1, #cd0000);
} 则此时的背景色是 CSS变量不合法的缺省特性请看下面这个例子： body {
--color: 20px;
background-color: #369;
background-color: var(--color, #cd0000);
} 请问，此时 A. transparent B. 20px C. #369 D. #cd0000 答案是…………………………A. transparent 不知大家答对了没有！ 这是CSS变量非常有意思的一个点，对于CSS变量，只要语法是正确的，就算变量里面的值是个乱七八糟的东西，也是会作为正常的声明解析，如果发现变量值是不合法的，例如上面背景色显然不能是 千万不能想当然得认为等同于 CSS变量的空格尾随特性请看下面这个例子： body {
--size: 20;
font-size: var(--size)px;
} 请问，此时 如果你以为是 body {
--size: 20px;
font-size: var(--size);
} 或者使用CSS3 body {
--size: 20;
font-size: calc(var(--size) * 1px);
} 此时， CSS变量的相互传递特性就是说，我们在CSS变量定义的时候可以直接引入其他变量给自己使用，例如： body {
--green: #4CAF50;
--backgroundColor: var(--green);
} 或者更复杂的使用CSS3 body {
--columns: 4;
--margins: calc(24px / var(--columns));
} 对于复杂布局，CSS变量的这种相互传递和直接引用特性可以简化我们的代码和实现成本，尤其和动态布局在一起的时候，无论是CSS的响应式后者是JS驱动的布局变化。 响应式的核心CSS代码（只需要改变 .box {
--columns: 4;
--margins: calc(24px / var(--columns));
--space: calc(4px * var(--columns));
--fontSize: calc(20px - 4 / var(--columns));
}
@media screen and (max-width: 1200px) {
.box {
--columns: 3;
}
}
@media screen and (max-width: 900px) {
.box {
--columns: 2;
}
}
@media screen and (max-width: 600px) {
.box {
--columns: 1;
}
} 本来自己边写边查资料，发现一篇总结的挺全的博客，就复制了一下并做了一些改动方便以后查阅。 附上链接： |
| 文档的根元素 |