calc( )的定义
用于动态计算长度值 可以用在任何长度,数值,时间,角度,频率等处
calc( )的运算符
+ - * /
width:calc(50% + 15px);
height:calc(100% - 20px);
width:calc(15 * 4px);
height:calc(100% / 4);
⚠️运算符两边需要有空格 ⚠️使用 * / 运算符时,必须保证有一个值为数值类型
calc( )使用区分
//1. css中
width:calc(100% - 20px);
//2. scss中
$base-font-size: 37.5px;
@function px2rem($px) {
@return ($px / $base-font-size) * 1rem / 2;
}
width:calc(100% - #{px2rem(15px)});
//3. less中
width:calc(~"100% - 15rem");
//4. sass中
width: calc(1rem - 2px);
width: calc((100% - #{$a}*#{$b})/#{$c} );
line-height: calc(1*20/14);
//⚠️sass中calc 不能单独识别“/”,也就是不能单独识别除法,解决这种问题有两种做法:0+表达式,或者1*表达式
calc( )应用例子