SASS的基本运算

一、减法

二、加法

加号可以不需要空格隔开，test.scss中

1 $test-width1: 100px;
2 $test-width2: 200px;
3 $test-width3: 300px;
4 
5 .test {
6     width: $test-width1+$test-width2+ $test-width3;
7     margin: 0 auto;
8 }

test.css中的结果：

1   .container {
2   width: 600px;
3   margin: 0 auto; }

另外，加号还可以做字符串连接。带引号的字符串在 + 号左侧，结果是一个有引号的字符串；没有引号的字符串在 + 号左侧，结果是一个没有引号的字符串。（如果中文乱码，可在文件头部写入： @charset "UTF-8";）

1 p:before {
2     content: "Foo " + Bar;
3     font-family: sans- + "serif";
4 }

结果：

1 p:before {
2   content: "Foo Bar";
3   font-family: sans-serif; }

三、乘法

能够支持多种单位（比如 em ,px , %），多个数值只需要为一个数值提供单位即可，否则报错。

四、除法

由于"/"在css中已有用途，因此需要在运算外层加上括号()，除法的使用情况总结，如下：

1 p {
2      font: 10px/8px;             // 纯 CSS，不是除法运算
3      $width: 1000px;
4      width: $width/2;            // 使用了变量，是除法运算
5      width: round(1.5)/2;        // 使用了函数，是除法运算
6      height: (500px/2);          // 使用了圆括号，是除法运算
7      margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
8 }