Scss乘法运算

css yekong

Scss 中的乘法运算和前面介绍的加法与减法运算还略有不同。虽然他也能够支持多种单位(比如 em ,px , %),但当一个单位同时声明两个值时会有问题。


.box {
  width:10px * 2px;  
}

编译的时候报“20px*px isn't a valid CSS value.”错误信息。

如果进行乘法运算时,两个值单位相同时,只需要为一个数值提供单位即可。上面的示例可以修改成:


.box {
  width: 10px * 2;
}

编译出来的 CSS:

.box {
  width: 20px;
}

Scss 的乘法运算和加法、减法运算一样,在运算中有不同类型的单位时,也将会报错。如下面的示例:

.box {
  width: 20px * 2em;
}

编译时报“40em*px isn't a valid CSS value.”错误信息。

喜欢