Sass_运算

Sass支持数字的加减乘除等运算 (+, -, *, /)，如果必要会在不同单位间转换值

xxxxxxxxxx
$size:100px;
.root{
    width: $size + 200px;
}

温馨提示

运算过程中，不同单位不要参与运算

xxxxxxxxxx
$size:1000px;
.root{
    width: $size - 200px;
}

xxxxxxxxxx
$size:1000px;
.root{
    width: $size * 2;
}

xxxxxxxxxx
$size:1000px;
.root{
    width: ($size / 2);
}

运算中的优先级

圆括号可以用来影响运算的顺序

xxxxxxxxxx
$size:1000px;
.root{
    width: ($size - 400) * 2;
}

应用场景

在移动端适配的时候，通常会有REM计算

例如：根 font-size为 50px, 设计师给的数值是340px

xxxxxxxxxx
$fontREM:50;
.root{
    width:(340rem / $fontREM);
}