CSS中使用变量的两个函数var和calc

CSS/CSS3 变量var()函数和calc()函数计算的使用

var()变量

var变量的定义语法 : --变量名 (两个短横线加上变量名)

calc() 函数计算

calc使用的时候有几个地方需要注意:

1. 运算符前后都需要保留一个空格

2. 任何长度值都可以使用calc()函数进行计算；

3. 支持 + - * / 运算；

4. 使用标准的数学运算优先级规则；

例如

在body中定义:

body{

--width : 100px;

--height : 100px;

--color : red;

--fontSize : 18px;

}

在标签中使用:

div{

width: var(--width);

height: var(--height);

line-height: var(--height);

color: var(--bgColor);

font-size: calc(var(--fontSize) + 8px);

}