Sass還有一個很特別的功能，也就是內建擁有加減乘除的語法，
但是，他究竟能支援設計師寫CSS什麼樣的工作呢？
首先我們先來假設情境：

1.你的網頁寬度是1000像素，一排放五個選單可以除盡為200px，但突然有天老闆又臨時要加兩個上去，1000/7是沒辦法除盡的，只能抓剛剛好的距離，但最右邊始終會有多餘的留白而覺得不好看
2.當網頁寬度改變以後，每個區塊元素又必須重新去計算，時常必須拿出計算機計算而感到不方便
Sass還有一個很特別的功能，也就是內建擁有加減乘除的語法，
但是，他究竟能支援設計師寫CSS什麼樣的工作呢？
首先我們先來假設情境：

1.你的網頁寬度是1000像素，一排放五個選單可以除盡為200px，但突然有天老闆又臨時要加兩個上去，1000/7是沒辦法除盡的，只能抓剛剛好的距離，但最右邊始終會有多餘的留白而覺得不好看
2.當網頁寬度改變以後，每個區塊元素又必須重新去計算，時常必須拿出計算機計算而感到不方便

我們先直接看Sass範例碼吧

$font-size:16px
.font-big
  font-size: $font-size * 1.2
.font-middle
  font-size: $font-size - 3px
.font-small
  font-size: $font-size / 3

變數大家都已曉得，帶進去後，
就會顯示於下面的結果

.font-big {
  font-size: 19.2px;
}
.font-middle {
  font-size: 13px;
}
.font-small {
  font-size: 5.33333px;
}

從上面的可以看出，
有些數字雖然除不盡，
但Sass可以幫你除到網頁解析度可以容許的範圍，
雖然仍然還有零點零幾的留白，但以我自己實際觀察網頁樣式，
用肉眼是完全沒看出留白的，
除了px單位外，em與%數也可以，
但假使你用px+em與%單位的話，
Sass會顯示出錯的：
如下示範影片(瀏覽模式請用全景+720P)：

1.0分30秒：按Ctrl+Shift+D 就可複製該行到下一行
2.0分40秒：px無法乘em，所以編譯錯握
3.1分20秒：可以在變數裡面做計算

另外再補一個我利用SASS來計算出一個滿版的選單寬度，
使用了fire.app的livereload，儲存檔案瀏覽器就自動更新：

1.1分19秒：要設定每個li單元的寬度，所以除以li的數量
2.1分30秒：讓a的行內變塊狀所以設成了block，行距和高度一樣就會垂直置中
3.2分25秒：模擬情境，當今天單元多了一個時，將整除的數量多加一，就自動算出寬度

--

相信從上面兩個範例可以看出，
透過全域常用變數的功能，
可以大幅減輕我們的計算版型負擔，
像Sass能夠自動抓取小數點末幾位的功能，
如果是用純CSS寫法，我們還是得動用自己的腦力去計算，
這樣其實是很費時的，
通常有在用Sass的，都會有自己內建的計算庫，
進以提升自己的寫code效率，
目前也有一個名為Susy的Sass程式庫，
方便在做Responsive版型調整時更加地順利。

如果你時常寫純CSS因為計算元素寬度感到頭痛，
那希望Sass的計算功能可提升你想用Sass的誘因嘍^_^