命名約定

在本節(jié)，我們不會(huì)討論適用于大規(guī)模和可維護(hù)的最佳 CSS 命名方案，因?yàn)檫@不僅僅超過(guò)了個(gè)人的能力范圍，也不是一個(gè)Sass樣式指南可以解決的問(wèn)題。我個(gè)人推薦遵從 CSS Guidelines 的建議。

良好的命名對(duì)保持整體代碼的一致性和可讀性非常重要，在 Sass 中可以命名的地方如下：

• 變量；
• 函數(shù)；
• 混合宏。

由于 Sass 占位符遵循和類名相同的命名模式，因此被視為常規(guī)的 CSS 選擇器，也就在這個(gè)列表中故意忽略掉了。

就變量、函數(shù)和混合宏的命名而言，我們堅(jiān)持一些很 CSS-y 的風(fēng)格：小寫連字符分隔，有意義的命名。

$vertical-rhythm-baseline: 1.5rem;

@mixin size($width, $height: $width) {
  // …
}

@function opposite-direction($direction) {
  // …
}

常量

如果你恰巧是一個(gè)框架開(kāi)發(fā)者或某個(gè)庫(kù)的維護(hù)者，你會(huì)發(fā)現(xiàn)自己正在使用的變量并不需要在所有情況下都進(jìn)行更新：此時(shí)是多么類似一個(gè)常量。不幸的是（或者幸運(yùn)的是？），Sass 不提供任何方式定義這樣的實(shí)體，所以我們要堅(jiān)持嚴(yán)格的命名約定來(lái)闡述我們的想法。

對(duì)于眾多編程語(yǔ)言，我建議使用全大寫方式書(shū)寫常量。這不僅是一個(gè)由來(lái)已久的編程習(xí)慣，而且可以很好的與小寫連字符變量加以區(qū)別。

// Yep
$CSS_POSITIONS: (top, right, bottom, left, center);

// Nope
$css-positions: (top, right, bottom, left, center);

如果你在 Sass 中使用常量，請(qǐng)參考這篇文章：如何在 Sass 中使用常量.

命名空間

如果你打算分發(fā)你的 Sass 代碼，比如一個(gè)庫(kù)、框架、柵格系統(tǒng)或者其他的什么，為了防止與其他人的代碼發(fā)生沖突，你就可能會(huì)考慮使用命名空間包裹你所有的變量、函數(shù)、混合宏和占位符。

舉例來(lái)說(shuō)，如果你參加了一個(gè)名為 Sassy Unicorn 的項(xiàng)目 —— 這意味著你可以向其貢獻(xiàn)代碼，你可能會(huì)考慮使用 su- 作為一個(gè)命名空間。這確實(shí)非常獨(dú)特，既不會(huì)引發(fā)命名沖突，又足夠短小而沒(méi)有書(shū)寫困難。

$su-configuration: ( … );

@function su-rainbow($unicorn) {
  // …
}

關(guān)于 CSS 的全局命名，Kaelig 寫過(guò) 一篇非常具有思考價(jià)值的文章。