在开发中，css样式有一些属性往往需要重复使用，为了避免代码冗余，降低维护成本。我们需要使用CSS预编译工具【Sass/Less/Stylus】，随着这些工具的流行，CSS变量也开始规范制定，目前很多浏览器都已经支持了
变量的定义：
变量的使用：
:root {
--text-color: red;
}
p {
color: var( --text-color ); /*使用*/
}
a:hover{
color:var( --text-color ); /*在伪类中使用*/
}
#myid{
--text-color: red;//*只能在id为myid的元素下使用,其他地方使用会失效*/
}
p{
--size: 20;
font-size: calc(var(--size) * 1px);//20px
}
p {
--color: red;
--text-color: var(--color);//值为red
}
css变量的注意点：
body {
--bc: background-color;
var(--bc): #369;
}
.box {
--1: #369;
}
body {
background-color: var(--1, #cd0000);/*则此时的背景色是#cd0000*/
}
body {
--color: 20px;
background-color: #369;
background-color: var(--color, #cd0000);/*背景色为：transparent*/
}
p{
--size: 20;
font-size: var(--size)px;//等同于font-size:20 px;这里将使用元素默认的大小。这里可以结合上面例子calc()使用。
}
服务热线 19970861797
