數(shù)字

在 Sass 中，數(shù)字類型包括了長度、持續(xù)時間、頻率、角度等等無單位數(shù)字類型。Sass 允許在運行中計算這些度量值。

零值

當數(shù)字小于?1?時，應該在小數(shù)點前寫出?0.?永遠不要顯示小數(shù)尾部的?0。

// Yep
.foo {
  padding: 2em;
  opacity: 0.5;
}

// Nope
.foo {
  padding: 2.0em;
  opacity: .5;
}

單位

當定義長度時，0?后面不需要加單位。

// Yep
$length: 0;

// Nope
$length: 0em;

在 Sass 中最常見的錯誤，是簡單地認為單位只是字符串，認為它會被安全的添加到數(shù)字后面。這雖然聽起來不錯，但卻不是單位正確的解析方式?？梢园褑挝徽J為是代數(shù)符號，例如，在現(xiàn)實世界中，5?英寸乘以?5?英寸得到?25?平方英寸。Sass 也適用這樣的邏輯。

將一個單位添加給數(shù)字的時候，實際上是讓該數(shù)值乘以1個單位。

$value: 42;

// Yep
$length: $value * 1px;

// Nope
$length: $value + px;

需要注意的是加上一個?0unit?也可以正確解析，但是這種方式在某種程度上會造成一些混亂，所以我更愿意推薦上面的方式。事實上，將一個數(shù)字轉換為其他兼容單位時，加?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);

給一個數(shù)值以字符串形式添加單位的結果是產生一個字符串，同時要防止對數(shù)據(jù)的額外操作。從一個帶有單位的數(shù)值中分離數(shù)字部分也會產生字符串，但這些都不是你想要的。

計算

最高級運算應該始終被包裹在括號中。這么做不僅是為了提高可讀性，也是為了防止一些 Sass 強制要求對括號內內容計算的極端情況。

// Yep
.foo {
  width: (100% / 3);
}

// Nope
.foo {
  width: 100% / 3;
}

MAGIC NUMBERS

“幻數(shù)”，是古老的學校編程給_未命名數(shù)值常數(shù)_的命名?；旧希鼈冎皇?em>能工作?但沒有任何邏輯思維的隨機數(shù)。

相信不用多說你也會理解，幻數(shù)是一場瘟疫，應不惜一切代價以避免。當你對數(shù)值的解析方式無法找到一個合理解釋時，你可以對此提交一個內容寬泛的評論，包括你是怎樣遇見這個問題以及你認為它應該怎樣工作。承認自己不清楚一些機制的解析方式，遠比讓以后的開發(fā)者從零開始弄清它們更有幫助。

/**
 * 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
• Correctly Adding Unit to Number
• Magic Numbers in CSS
• Sassy-Math