css变量var

一，前言

1.当一个重复被使用的css属性值需要修改时，需要在每一个使用的地方修改一次，显然是很麻烦的。在css3中引入了属性变量和var函数的概念，让css也可以拥有变量。

二，定义变量

1.css自定义变量形式为 --变量名

	--theme-color:'green',
	--theme-default:'blue'

三，声明变量

1.在伪类:root中全局定义，可以作为全局变量使用

:root{
	--theme-color:'green',
	--theme-default:'blue'
}

2.在局部中定义

.box{
	--theme-color:'green',
	--theme-default:'blue'
}

3.还可以在style属性自定义变量，作为该元素的私有变量

<div style="--i:100px" class='line'></div>

.line{
	width:var(--i)
}

四，使用变量

1.使用var函数来引用变量

.box{
	--theme-color:'green',
	--theme-default:'blue'	
	color:var(--theme-color)
	background:var(--theme-default)
}

2.当变量引用失败后，可以设置自定义默认值

.box{
	--theme-color:'green',
	--theme-default:'blue'	
	color:var(--theme-color,'yellow')
}

五，注意事项

1.变量命名大小写敏感

2.全局中定义的变量可以在任何地方使用，局部中定义的只能在局部中使用

3.变量也是跟着CSS选择器走的，如果变量所在的选择器和使用变量的元素没有交集，是没有效果的