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

在这里记录一下开发过程中突然喜欢上的CSS/CSS3 var()变量以及calc()函数 , 让在不使用sass以及less的情况下也能进行一个比较高效的样式设置

var()变量

var变量的定义语法 : - -变量名 两个短横线加上变量名
var变量的使用 : var(- -变量名)
我们可以在body中或者任何一个我们想要使用的变量语法的层级中定义var()变量并进行使用

例如在body中定义:

1
2
3
4

body{
--fontSize: 18px;
--color: #000000;
}

在某标签中使用:

1
2
3
4

div-name{
font-size : var(--fontSize);
color: var(--color);
}

这样可以直接设置此div块的样式,用起来非常的舒服,维护修改起来也特别方便!

calc()函数

在目前高兼容要求下 calc() 函数计算越来越重要,将calc()函数计算和var()变量结合使用更是相当的舒服

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

body{
--width : 200px;
--height : 200px;
--color : red;
--fontSize : 18px;
--bgColor : #3c3c3c;
}
body{
display: flex;
justify-content: space-around
}
div{
width: var(--width);
height: var(--height);
line-height: var(--height);
background-color: var(--bgColor);
text-align: center;

}
.div-1{
color: var(--color);
font-size: var(--fontSize);
}
.div-2{
color: yellow;
font-size: calc(var(--fontSize) + 4px);
}
.div-3{
color: green;
font-size: calc(var(--fontSize) + 8px);
}

1
2
3
4
5

最终呈现的效果

注:calc()函数计算使用的时候有几个地方需要注意:
运算符前后都需要保留一个空格
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 “+”, “-”, “*”, “/” 运算；
calc()函数使用标准的数学运算优先级规则；

完美的通过var变量统一设置了宽高等属性,并且通过var变量和calc函数计算的结合设置了字体大小的增减,同理可以使用这种方法对margin,padding,width等等属性进行设置,使用起来不要太爽!

并且目前兼容性来说基本主流浏览器都兼容了,很是不错,参考以下