css原生变量 var

css 变量的支持状况：

在pc端支持还不错，ie不支持，移动端也不支持，大概这就是css变量没有普遍使用的缘由吧

CSS预编译工具Sass/Less/Stylus的便捷之处就是能够定义变量，方便代码的维护，其实css也有本身原生的变量var：

命名方式：--* (以--开头，*表明变量名称)

变量名称命名规则：

不能以：$，[，^，(，%等字符字符开头，能够是数字，可是css和js不能以数字开头；可是能够是中文，日文或者韩文

使用方法：

1 就想定义元素的属性同样：

：root{ --red:red; --blue:blue; --yellow:yellow;

} .div1{ 
background-color:var(--red);
}

2 css变量有本身的做用域：

例如：

#div2{

--borderWidth:2px;

}

.div3{

--borderColor:red;

border:1px solid var(--borderColor);

}

#div2{

border:var(--borderWidth) solid red;

}

 

.div3中的--borderColor只能class为div3的元素能够使用，它的做用域在div3中

--borderWidth 只能是id为div2的元素才能够使用，别的元素没有做用

:root下定义的变量的做用域是整个文档

3 css缺省值

var( <自定义属性名> [, <默认值 ]? )

.div5{

background-color:var(--color,red);

}

 

--color变量没有定义，就使用默认值red；

因此上面的定义方式等价于：

 

.div5{

 background-color:red;
}

 

4 css变量默认值

.div6{

background-color:var(--color);

}

 

div6没有定义默认值。--color变量没有定义。背景颜色默认是白素

等价于没有定义背景颜色

 

5 不合法的变量值：

.div7{

--width:20px;

color:var(--width,red);

}

不合法的使用，不是缺省值。等价于

.div7{

--width:20px;

color:20px;

}

因此文字的颜色是文字的默认颜色，不是红色而是黑色

 

6 CSS变量的空格尾随特性

.div8{
--size:20px;
font-size:var(--size)px;
}
div8的字体大小并非20px;是默认的字体大小
解析出来是font-size:20 px;在20的后边有一个空格 。。。。

能够使用CSS3 calc（）计算：

.div8 {
  --size: 20;   
  font-size: calc(var(--size) * 1px);
}
div8的字体大小才是20px;

 

 

7 css属性不能定义变量。例如：

.div4{

--width:width;

border-var(--width):1px;

var(--width):20px;

}

上面的定义方式是不合法的

 

8 与Sass/Less/Stylus中的定义不一样，不能像定义变量同样；例如：

--red:red;
span{
 background-color:var(--red);
}

上面的定义方法是不起做用的

css原生的变量的定义方法，就想定义元素的属性同样