sass中的运算

1、加法

全部由绝对长度参与可以使用不同的单位

.test{
	width:1px+1px;
}

编译后

.test{
	width:2px;
}

---

.test{
	width:1px+1in;
}

编译后

.test{
	width:106px;
}

---

有相对长度参与必须使用相同的单位，否则报错。如：

.test{
	width:1px + 1rem;
}
Error: Incompatible units: 'rem' and 'px'.
        on line 2 of ./scss/index.scss

.test{
	width:1em + 1rem;
}
Error: Incompatible units: 'rem' and 'em'.
        on line 2 of ./scss/index.scss

2、减法（和加法遵守相同的规则）

3、乘法

1）、不同单位之间不能做乘法，会报错。

.test{
	width:1px*1rem;
}
/*Error: 1px*rem isn't a valid CSS value.*/

.test{
	width:1px*1pc;
}
/*Error: 1px*pc isn't a valid CSS value.*/

2）、相同单位之间只能有一个带单位。如：

.test{
	width:1px * 2px;
}
/*Error: 1px*px isn't a valid CSS value.*/

正确的写法

.test{
	width:1px * 2;
}

4、除法

因为除法运算符 “/” 本身也是css合法的符号，因此做除法是要用 括号 “()” 括起来。如：

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

但有以下情况可以不用括号也可识别
1）、有其他运算符参与运算

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

2）、有变量参与运算

$max-width:1000px;
.test{
	width:$max-width/2;
}

5、颜色运算