1. 加減法
加減法不是重點，重點是在SassScript中用到的兩種單位之間的轉換；
絕對單位：px, pt, pc, in, mm, cm...絕對單位都能運算；
相對單位：ex, em, rem...相對當前字體的都不能運算；
1.1 編譯報錯的栗子
SCSS：
1 $plus1: 100px + 20ex; //不能換算的編譯都會報錯;
2 $plus2: 100px + 20em;
3 $plus3: 100px + 20rem;
4 .plus{
5 width: $plus1 + 10px; //在變量或屬性中均可做加減法運算;
6 }
7 編譯報錯：
8 Incompatible units: 'ex' and 'px'.
9 Incompatible units: 'em' and 'px'.
10 Incompatible units: 'rem' and 'px'.
1.2 正常編譯的栗子
SCSS：
1 $minus1: 100px - 20; //第二個值可不帶單位；
2 $minus2: 100pt - 20px; //運算是從左到右，如第二個值的單位不同於第一個值的單位(pt)，
3 $minus3: 100px + 20cm; //將會對其進行轉換(pt)后再運算；編譯出來的值的單位也是(pt);
4 $minus4: 100rem; //可以正常編譯輸出;
5 $minus5: 100rem + 10em; //報錯;--Incompatible units: 'em' and 'rem'.);
6 .minus{
7 width: $minus1;
8 height: $minus1 + 30; //在屬性還可以繼續做運算；
9 min-width: $minus2;
10 min-height: $minus3;
11 max-width: $minus4;
12 max-height: $minus1 + $minus2;
13 }
| //普遍情況下很少會搞兩個單位在那加加減減，閑得蛋疼，反正我不會，在這只是舉個栗子。 |
被編譯為：
1 .minus {
2 width: 80px;
3 height: 110px;
4 min-width: 85pt;
5 min-height: 855.90551px;
6 max-width: 100rem;
7 max-height: 193.33333px;
8 }
2. 乘法
SassScript中的乘法運算和加減法運算還略有不同。雖然他也能夠支持多種單位（比如 em ,px , %），但當一個單位同時聲明兩個值時會有問題。比如下面的示例：
| SCSS： |
1 .ride { width: 20px * 10px; }
編譯報錯：
1 20px*px isn't a valid CSS value.
如果進行乘法運算時，兩個值單位相同時，只需要為一個數值提供單位即可。改成：
| SCSS： |
1 .ride { width: 20px * 10; }
| 編譯輸出： |
1 .ride { width: 200px; }
在乘法運算中如有不同類型的單位時，也將會報錯。
| SCSS： |
1 .ride { width: 20px * 10rem; }
編譯報錯：
1 200px*rem isn't a valid CSS value.
2.1 結合#@for來個好玩的
雪碧圖一般都用
compass的@import "compass/utilities/sprites";來玩
SCSS：
1 $icon-list: down, up, file, hot;
2 @for $c from 1 through length($icon-list){
3 .icon-#{nth($icon-list,$c)}{
4 background-position: 0 -30px * $c;
5 }
6 }
被編譯為：
1 .icon-down {
2 background-position: 0 -30px;
3 }
4 .icon-up {
5 background-position: 0 -60px;
6 }
7 .icon-file {
8 background-position: 0 -90px;
9 }
10 .icon-hot {
11 background-position: 0 -120px;
12 }
3. 除法
CSS 允許 / 出現在屬性值里，作為分隔數字的一種方法。 既然 SassScript 是 CSS 屬性語法的擴展， 他就必須支持這種語法，同時也允許 / 用在除法運算上。 也就是說，默認情況下，在 SassScript 里用 / 分隔的兩個數字， 都會在 CSS 中原封不動的輸出。
SCSS：
1 .main {
2 font: 10px/8px; // 純 CSS，不是除法運算
3 $width: 100px;
4 width: $width/2; // 使用了變量，是除法運算
5 width: round(1.5)/2; // 使用了函數，是除法運算
6 height: (500px/2); // 使用了圓括號，是除法運算
7 margin-left: 5px + 8px/2px; // 使用了加（+）號，是除法運算
8
9 $font-size: 12px;
10 $line-height: 30px;
11 font: #{$font-size}/#{$line-height}; //純CSS中使用變量和 /， 可以用 #{} 包住變量；
12 }
被編譯為：
1 .main {
2 font: 10px/8px;
3 width: 50px;
4 width: 1;
5 height: 250px;
6 margin-left: 9px;
7 font: 12px/30px;
8 }
4. 來個栗子試試——顏色運算
所有算數運算都支持顏色值， 並且是分段運算的。 也就是說，紅、綠、藍各顏色分量會單獨進行運算。例如：
1 .main-col{ color: #106021 + #023212; }
2 計算公式為 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09，
3 被編譯為：
4
5 .main-col { color: #129233; }
算數運算也能將數字和顏色值一起運算，同樣也是分段運算的。 例如：
1 p { color: #010203 * 2; }
2 計算公式為 01 * 2 = 02、02 * 2 = 04 和 03 * 2 = 06，
3 被編譯為：
4
5 p { color: #020406; }
IE 濾鏡需要每個顏色都包含 alpha 層， 並且得用 #AABBCCDD 這樣嚴格的格式。你可以輕松的利用 {Sass::Script::Functions#ie_hex_str ie_hex_str} 函數對其做轉換。 例如：
1 $translucent-red: rgba(255, 0, 0, 0.5);
2 $green: #00ff00;
3 div {
4 filter: progid:DXImageTransform.Microsoft.gradient(
5 enabled='false',
6 startColorstr='#{ie-hex-str($green)}',
7 endColorstr='#{ie-hex-str($translucent-red)}'
8 );
9 }
10 被編譯為：
11
12 div {
13 filter: progid:DXImageTransform.Microsoft.gradient(
14 enabled='false',
15 startColorstr=#FF00FF00,
16 endColorstr=#80FF0000
17 );
18 }
4. 最后一個栗子——字符運算
1 + 運算符可以用來連接字符串：
2
3 p { cursor: e + -resize; }
4 被編譯為：
5
6 p { cursor: e-resize; }
7 注意，如果有引號的字符串被添加了一個沒有引號的字符串 （也就是，帶引號的字符串在 + 符號左側）， 結果會是一個有引號的字符串。 同樣的，如果一個沒有引號的字符串被添加了一個有引號的字符串 （沒有引號的字符串在 + 符號左側）， 結果將是一個沒有引號的字符串。 例如：
8
9 $c: "Hello" + " " + "Sass!";
10 .box:before {
11 content: " #{$c} ";
12 }
13 被編譯為：
14
15 .box:before {
16 content: " Hello Sass! ";
17 }