CSS变量，CSS变量又叫做 CSS自定义属性（CSS custom properties）， 是由CSS作者定义的实体，其中包含要在整个文档中重复使用的特定值。使用自定义属性来设置变量名，并使用特定的var()来访问。
1.1CSS变量的用途
构建大型站点时，在这些网页中，有大量的CSS样式，并且会在许多场合大量重复的使用。比如说：为了保持一种配色方案，在这个配色方案中会有一些颜色经常重复出现在CSS样式表中。如果想要修改配色方案，不论是想单独修改某个颜色或是整套配色，都不是一个简单的问题，而且很容易出错。
CSS可以减轻工作的复杂性，更方便修改和添加。不需要额外的编译。第二个好处就是变量本身是包含语义的信息。使CSS文件变
得更易读和容易理解。main-text-color比单纯出现在文档中的#00ff00要更加容易理解，特别是有相同颜色出现在不同的文件中
时。
1.2什么是CSS变量
CSS变量当前有两种形式：
- 变量：就是拥有合法标识符和合法的值。可以被使用在任意的地方。可以使用var()函数使用函数var(--main-size) 会返回--main-size对应的值。
自定义属性：这些属性使用--where的特殊格式作为名字
--main-size:30px; 即声明一个CSS语句，意思是：将30px赋值给--main-size变量。
1.3变量的声明
声明变量之前，变量名之前要加上两个连字符（--）
在这个例子中，body选择器中出现了两个变量：--head-color 和 --foot-color。
CSS变量与color、background这些正式属性并没有什么不同，只是没有默认含义。CSS变量其实与自定义的CSS属性用法相同。
注意：变量名的大小写敏感，--head不同于--Head，这是两个不同的变量。
变量的作用域：一个变量的作用域是其对应的选择器的作用范围，div选择器对应div的范围，由于这个原因，全局的变量通常放在根元素 :root里面，确保任何选择器都可以读取它们。
（一）声明一个局部变量
element {
--main-bg-color: brown;
}（二）声明一个全局变量
:root {
--global-color: #666;
--pane-padding: 5px 42px;
}：root 这个伪类选择器匹配的是文档树的根元素。对于HTML来说，：root表示的是 <html> 根元素，除了优先级更高以外，与html元素选择器相同。
使用全局变量（在全局中声明以后，其他选择器也可以调用）
1.4var()函数
（一） var( ) 函数用以读取变量，var（变量名）
.box{
--cor:#ddf;
background-color: var(--cor);
width:400px;height:40px;
}（二） var()函数还可以使用第二个参数，表示变量的默认值。如果这个变量不存在，就会使用这个默认值
.box{
--cor:#ddf;
background-color: var(--corlo , red);
width:400px;height:40px;
}在这个例子里，var()使用了两个参数，变量--corlo和默认值red，由于不存在--corlo这个变量，所以使用red默认值。
注意：第二个参数不处理内部的逗号或是空格，都视为参数的一部分
font-size: var(--sizq,40px 12px);（三） var()函数还可以用在变量的声明
.box{
--cor:#ddf;
--bacolor: var(--cor);
}注意：变量只能用作属性值，不能用作属性名；
.box{
--size:font-size;
var(--size):30px;
}这个例子中，变量--size用作属性名，这是无效的
393
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
