SCSS 運算

SCSS 讓我們在撰寫 CSS 的時候，可以運用基本的運算。
其中我們多少會碰到一些單位、轉換的問題，以下帶大家了解它背後運算的邏輯。



帶單位的數字可以相加或相減，也可以取餘數：

width: 10px + 2px; => width: 12px; //相加
width: 10px - 2px;  => width: 10px; //相減
width: 10px % 3px ;  => width: 1px; //取餘數

帶單位的數字相除時，單位會被消除。要特別注意除法要帶括弧()：

width: (10px/2px)  => width: 5; //單位消失了!!
width: (10px/2)  => width: 5px; //正常
width: 10px/2  =>  width: 10px/2; //沒有帶括弧的結果

帶單位的數字相乘，會出現錯誤：

width: 10px * 2px  =>  error; //單位引起的錯誤
width: 10px * 2  => width: 20px; //正常

絕對單位之間可以互相轉換(px、cm、pc 等等)：

width: 10px + 2pc; => width: 42px; //正常
width: 10px + 2cm;  => width: 85.59055px; //正常

相對單位無法轉換(％、em、rem 等等)：

width: 10px + 2%;  =>  error; //單位引起的錯誤
width: 10px+2em;  =>  error; //單位引起的錯誤

大部分的運算都支持 單位/無單位 運算：

width: 10px + 2;  => width: 12px; //正常
width: 10pc + 2;  => width: 12pc; //正常
width: 10cm + 2 ;  => width: 12cm; //正常
width: 10% + 2;  => width: 12%; //正常
width: 10em + 2;  => width: 12em; //正常
width: 10rem + 2;  => width: 12rem; //正常

另外，數字轉成字串的時候必須用" #{}"轉換，時常發生在選擇器上：

.box( 2+3) {  }  =>  error //(2+3) 是數字，無法與 .box 合併
.box #{( 2+3) } {  }  => .box5 {} //(2+3) 被轉換為字串(5)了，與 .box 合併變 .box5

簡單介紹了一些數字運算會遇到的問題，尤其是轉換字串的方法一定要記得，實務上很常使用到，請大家務必記得。