在 Sass 中，數字類型包括了長度、持續時間、頻率、角度等等無單位數字類型。Sass 允許在運行中計算這些度量值。 ## 零值 當數字小于?`1`?時，應該在小數點前寫出?`0.`?永遠不要顯示小數尾部的?`0`。 ~~~ // Yep .foo { padding: 2em; opacity: 0.5; } // Nope .foo { padding: 2.0em; opacity: .5; } ~~~ ## 單位 當定義長度時，`0`?后面不需要加單位。 ~~~ // Yep $length: 0; // Nope $length: 0em; ~~~ 在 Sass 中最常見的錯誤，是簡單地認為單位只是字符串，認為它會被安全的添加到數字后面。這雖然聽起來不錯，但卻不是單位正確的解析方式。可以把單位認為是代數符號，例如，在現實世界中，`5`?英寸乘以?`5`?英寸得到?`25`?平方英寸。Sass 也適用這樣的邏輯。 將一個單位添加給數字的時候，實際上是讓該數值乘以_`1`個單位_。 ~~~ $value: 42; // Yep $length: $value * 1px; // Nope $length: $value + px; ~~~ 需要注意的是加上一個?_`0unit`_?也可以正確解析，但是這種方式在某種程度上會造成一些混亂，所以我更愿意推薦上面的方式。事實上，將一個數字轉換為其他兼容單位時，加?`0`?操作并不會造成錯誤。 ~~~ $value: 42 + 0px; // -> 42px $value: 1in + 0px; // -> 1in $value: 0px + 1in; // -> 96px ~~~ 這一切最終取決于你想要達到怎樣的效果。只要記住，像添加一個字符串一樣添加一個單位并不是一種好的處理方式。 要刪除一個值的單位，你需要除以_相同類型的?`1`?單位_。 ~~~ $length: 42px; // Yep $value: $length / 1px; // Nope $value: str-slice($length + unquote(''), 1, 2); ~~~ 給一個數值以字符串形式添加單位的結果是產生一個字符串，同時要防止對數據的額外操作。從一個帶有單位的數值中分離數字部分也會產生字符串，但這些都不是你想要的。 ## 計算 **最高級運算應該始終被包裹在括號中**。這么做不僅是為了提高可讀性，也是為了防止一些 Sass 強制要求對括號內內容計算的極端情況。 ~~~ // Yep .foo { width: (100% / 3); } // Nope .foo { width: 100% / 3; } ~~~ ## MAGIC NUMBERS “幻數”，是[古老的學校編程](http://en.wikipedia.org/wiki/Magic_number_(programming)#Unnamed_numerical_constants)給_未命名數值常數_的命名。基本上，它們只是_能工作_?但沒有任何邏輯思維的隨機數。 相信不用多說你也會理解，**幻數是一場瘟疫，應不惜一切代價以避免**。當你對數值的解析方式無法找到一個合理解釋時，你可以對此提交一個內容寬泛的評論，包括你是怎樣遇見這個問題以及你認為它應該怎樣工作。承認自己不清楚一些機制的解析方式，遠比讓以后的開發者從零開始弄清它們更有幫助。 ~~~ /** * 1\. Magic number. This value is the lowest I could find to align the top of * `.foo` with its parent. Ideally, we should fix it properly. */ .foo { top: 0.327em; /* 1 */ } ~~~ ## 擴展閱讀 * [Use Lengths, Not Strings](http://hugogiraudel.com/2013/09/03/use-lengths-not-strings/) * [Correctly Adding Unit to Number](http://css-tricks.com/snippets/sass/correctly-adding-unit-number/) * [Magic Numbers in CSS](http://css-tricks.com/magic-numbers-in-css/) * [Sassy-Math](https://github.com/at-import/sassy-math)