[Sass]运算

加法

.box {
  width: 20px + 8in;
}

编译出来的 CSS:

.box {
  width: 788px;
}

但对于携带不同类型的单位时，在 Sass 中计算会报错，如下例所示：

.box {
  width: 20px + 1em;
}

编译的时候，编译器会报错：“Incompatible units: ‘em’ and ‘px’.”

减法

$full-width: 960px;
$sidebar-width: 200px;

.content {
  width: $full-width -  $sidebar-width;
}

乘法

.box {
  width: 10px * 2;
}

除法

Sass 的乘法运算规则也适用于除法运算。不过除法运算还有一个特殊之处。众所周知“/”符号在 CSS 中已做为一种符号使用。因此在 Sass 中做除法运算时，直接使用“/”符号做为除号时，将不会生效，编译时既得不到我们需要的效果，也不会报错。要修正这个问题，只需要给运算的外面添加一个小括号( )即可

.box {
  width: (100px / 2);  
}

除了上面情况带有小括号，“/”符号会当作除法运算符之外，如果“/”符号在已有的数学表达式中时，也会被认作除法符号。如下面示例：

.box {
  width: 100px / 2 + 2in;  
}

另外，在 Sass 除法运算中，当用变量进行除法运算时，“/”符号也会自动被识别成除法，如下例所示：

$width: 1000px;
$nums: 10;

.item {
  width: $width / 10;  
}

.list {
  width: $width / $nums;
}

颜色运算

所有算数运算都支持颜色值，并且是分段运算的。也就是说，红、绿和蓝各颜色分段单独进行运算。如：

p {
  color: #010203 + #040506;
}

计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09， 并且被合成为：

如此编译出来的 CSS 为：

p {
  color: #050709;
}

字符运算

在 Sass 中可以通过加法符号“+”来对字符串进行连接。

div {
  cursor: e + -resize;
}

编译出来的CSS:

div {
  cursor: e-resize;
}