CSS 函数calc() 与 CSS 变量var()的混合使用

CSS 变量混合使用加法减法

当设置一个变量为200px时后期不满足需求需要增加10px或20px时而需要扩展；例如我们需要给一个div的宽度设置为210px，但我们的变量是200px，这时我们就可以用变量的值加上10px就行了，如下（本篇所使用的宽度属性是CSS逻辑属性）

:root{
–base-size-200: 200px;
}

div{
inline-size: calc(var(–base-size-200) + 10px);
}

或者我们的变量里面已经有10px这个变量了，那么可以这样做

:root{
–base-size-200: 200px;
–base-size-10: 10px;
}

div{
inline-size: calc(var(–base-size-200) + var(–base-size-10));
}

如果的话减法同上面一样，就是把加号换做减号就行了

div{
inline-size: calc(var(–base-size-200) - var(–base-size-10));
}

乘法就是把你现在大小乘以你想要的值就是你的尺寸，我们还以上面的为例，将200px设为2倍或3倍来运算

:root{
–base-size-200: 200px;
}

div{
inline-size: calc(var(–base-size-200) * 2);
}

除法同上面一样将乘号换为除号

div{
inline-size: calc(var(–base-size-200) / 2);
}

其实这个也很简但，就是将上面的两种方法加起来运算就可以了

:root{
–base-size-200: 200px;
–base-size-10: 10px;
}
div{
inline-size: calc(var(–base-size-200) * 2 + var(–base-size-10));
}

好了全是废话，篇幅较小不喜勿喷