calc定义与用法
calc() 函数用于动态计算数值。
- 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
- 任何长度值都可以使用calc()函数进行计算；
- calc()函数支持 “+”, “-“, “*”, “/“ 运算；
- calc()函数使用标准的数学运算优先级规则；
- 加法和减法的运算符号两边必须有空格,例如:calc(50% - 8px)
- 乘法:两个值之间必须有一个为数字
- 除法:左边必须为数字
为什么使用calc
使用calc可以配合css变量,就不需要使用JS计算结果。做到视图和数据的解耦
.foo {
--widthA: 100px;
--widthB: calc(var(--widthA) / 2);
--widthC: calc(var(--widthB) / 2);
width: var(--widthC);
}