數(shù)字

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

零值

當(dāng)數(shù)字小于?1?時(shí)，應(yīng)該在小數(shù)點(diǎn)前寫出?0.?永遠(yuǎn)不要顯示小數(shù)尾部的?0。

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

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

單位

當(dāng)定義長(zhǎng)度時(shí)，0?后面不需要加單位。

// Yep
$length: 0;

// Nope
$length: 0em;

在 Sass 中最常見的錯(cuò)誤，是簡(jiǎn)單地認(rèn)為單位只是字符串，認(rèn)為它會(huì)被安全的添加到數(shù)字后面。這雖然聽起來(lái)不錯(cuò)，但卻不是單位正確的解析方式。可以把單位認(rèn)為是代數(shù)符號(hào)，例如，在現(xiàn)實(shí)世界中，5?英寸乘以?5?英寸得到?25?平方英寸。Sass 也適用這樣的邏輯。

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

$value: 42;

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

// Nope
$length: $value + px;

需要注意的是加上一個(gè)?0unit?也可以正確解析，但是這種方式在某種程度上會(huì)造成一些混亂，所以我更愿意推薦上面的方式。事實(shí)上，將一個(gè)數(shù)字轉(zhuǎn)換為其他兼容單位時(shí)，加?0?操作并不會(huì)造成錯(cuò)誤。

$value: 42 + 0px;
// -> 42px

$value: 1in + 0px;
// -> 1in

$value: 0px + 1in;
// -> 96px

這一切最終取決于你想要達(dá)到怎樣的效果。只要記住，像添加一個(gè)字符串一樣添加一個(gè)單位并不是一種好的處理方式。

要?jiǎng)h除一個(gè)值的單位，你需要除以相同類型的?1?單位。

$length: 42px;

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

// Nope
$value: str-slice($length + unquote(''), 1, 2);

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

計(jì)算

最高級(jí)運(yùn)算應(yīng)該始終被包裹在括號(hào)中。這么做不僅是為了提高可讀性，也是為了防止一些 Sass 強(qiáng)制要求對(duì)括號(hào)內(nèi)內(nèi)容計(jì)算的極端情況。

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

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

MAGIC NUMBERS

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

相信不用多說(shuō)你也會(huì)理解，幻數(shù)是一場(chǎng)瘟疫，應(yīng)不惜一切代價(jià)以避免。當(dāng)你對(duì)數(shù)值的解析方式無(wú)法找到一個(gè)合理解釋時(shí)，你可以對(duì)此提交一個(gè)內(nèi)容寬泛的評(píng)論，包括你是怎樣遇見這個(gè)問題以及你認(rèn)為它應(yīng)該怎樣工作。承認(rèn)自己不清楚一些機(jī)制的解析方式，遠(yuǎn)比讓以后的開發(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 */
}

擴(kuò)展閱讀

• Use Lengths, Not Strings
• Correctly Adding Unit to Number
• Magic Numbers in CSS
• Sassy-Math