工具

和 Sass 一樣受歡迎的 CSS 預(yù)處理器的優(yōu)秀之處就在于，它提供了包括框架、插件、庫和工具在內(nèi)的整套開發(fā)環(huán)境。Sass 誕生 8 年以來，其本身的特性和 everything that can be written in Sass has been written in Sass 一文中的觀點越來越相近。

不過，我的建議是最小程度的依賴于各種工具。管理依賴可能會是你特別不想面對的事情。此外，在 Sass 中很少需要外部依賴。

Compass

Compass 是 Sass 中主要的框架。其開發(fā)者 Chris Eppstein，是 Sass 的兩位核心開發(fā)者之一。如果你想聽一下我的看法，我想說這個框架一直很流行。

不過，我已經(jīng)不再使用 Compass 了，主要原因是它很大程度上拖慢了 Sass。Ruby Sass 本身就比較慢，所以在此之上增加更多功能并無益處。

實際上，我們通常只使用了框架本身的一點點功能，而完整的 Compass 是龐大的。混合宏的跨瀏覽器兼容功能也只是冰山一角。數(shù)學(xué)函數(shù)、圖像輔助、幽靈圖……使用這個優(yōu)秀的工具有太多的好處了。

不幸的是，這就是所有的語法糖而且沒有一個是殺手級的特性。精靈圖生成器雖然非常優(yōu)秀，但也會報出一兩個錯誤。不過 Grunticon 和 Grumpicon 就運行的很好，而且它們還有可以被插入到構(gòu)建過程的優(yōu)勢。

雖然我不建議使用 Compass，但我也不會禁止使用它，特別是當它不兼容 LibSass 的時候（即使它正朝這個方向努力）。如果你感覺使用起來還不錯，這當然可以，但是我認為最終你也不會從中收獲更多。

柵格系統(tǒng)

隨著響應(yīng)式網(wǎng)頁設(shè)計地遍地開花，柵格系統(tǒng)布局已經(jīng)成為了一種必然選擇。為了固定大小并使設(shè)計風格統(tǒng)一，我們通常使用網(wǎng)格來給元素布局。為了避免反復(fù)地布局工作，一些非凡的想法認為應(yīng)該使它們保持可復(fù)用性。

還是長話短說吧：我并非柵格系統(tǒng)的擁躉。當然我確實看到了它的潛力，但大多的是矯枉過正，而且主要是被設(shè)計師用來繪制紅欄白底的原型。你還記得上一次有 thank-God-I-have-this-tool-to-build-this-2-5-3.1-π-grid 如此贊嘆的時間嗎？那就對了，從來沒有過。因為在多數(shù)情況下，你只是想使用12列柵格布局，毫不奇特。

如果你正在項目中使用類似 Bootstrap 和 Foundation 的 CSS 框架，我建議善用它們來避免額外的依賴，因為此時它們很有可能就包含了一套柵格系統(tǒng)，。

如果你尚未依賴于特定的柵格系統(tǒng)，那么也許會樂意了解這里介紹的兩個由 Sass 支持的柵格引擎：Susy 和 Singularity。它們都可以滿足你的需求，所以只需從中挑選喜歡的一個來用即可并且可以放心即使是你的苛刻需求—哪怕是最多變的—也可以被實現(xiàn)。

或者你可以處理地更輕松些，就像使用 CSSWizardry Grids 的感覺。總而言之，任何選擇都不會對你的代碼風格有過多影響，所以這一點上一切取決于你。

SCSS-lint

審查代碼是非常重要的事情。通常來說，遵從一份樣式指南的規(guī)范可以幫助減少代碼質(zhì)量上的問題，但是沒有人的工作是無懈可擊的，何況總有些地方需要改善。所以，可以認為，審查代碼和注釋文檔一樣重要。

SCSS-lint 是一個幫你保持 SCSS 文件簡潔而又具有可讀性的工具。它是完全可定制化的，并且非常易于和其他工具集成。

幸運的是，本文檔的描述非常類似于 SCSS-lint 的使用建議。為了根據(jù) Sass 樣式指南配置 SCSS-lint，建議如下配置：

linters:

  BangFormat:
    enabled: true
    space_before_bang: true
    space_after_bang: false

  BemDepth:
    enabled: true
    max_elements: 1

  BorderZero:
    enabled: true
    convention: zero

  ChainedClasses:
    enabled: false

  ColorKeyword:
    enabled: true

  ColorVariable:
    enabled: false

  Comment:
    enabled: false

  DebugStatement:
    enabled: true

  DeclarationOrder:
    enabled: true

  DisableLinterReason:
    enabled: true

  DuplicateProperty:
    enabled: false

  ElsePlacement:
    enabled: true
    style: same_line

  EmptyLineBetweenBlocks:
    enabled: true
    ignore_single_line_blocks: true

  EmptyRule:
    enabled: true

  ExtendDirective:
    enabled: false

  FinalNewline:
    enabled: true
    present: true

  HexLength:
    enabled: true
    style: short

  HexNotation:
    enabled: true
    style: lowercase

  HexValidation:
    enabled: true

  IdSelector:
    enabled: true

  ImportantRule:
    enabled: false

  ImportPath:
    enabled: true
    leading_underscore: false
    filename_extension: false

  Indentation:
    enabled: true
    allow_non_nested_indentation: true
    character: space
    width: 2

  LeadingZero:
    enabled: true
    style: include_zero

  MergeableSelector:
    enabled: false
    force_nesting: false

  NameFormat:
    enabled: true
    convention: hyphenated_lowercase
    allow_leading_underscore: true

  NestingDepth:
    enabled: true
    max_depth: 1

  PlaceholderInExtend:
    enabled: true

  PrivateNamingConvention:
    enabled: true
    prefix: _

  PropertyCount:
    enabled: false

  PropertySortOrder:
    enabled: false

  PropertySpelling:
    enabled: true
    extra_properties: []

  PropertyUnits:
    enabled: false

  PseudoElement:
    enabled: true

  QualifyingElement:
    enabled: true
    allow_element_with_attribute: false
    allow_element_with_class: false
    allow_element_with_id: false

  SelectorDepth:
    enabled: true
    max_depth: 3

  SelectorFormat:
    enabled: true
    convention: hyphenated_lowercase
    class_convention: '^(?:u|is|has)\-[a-z][a-zA-Z0-9]*$|^(?!u|is|has)[a-zA-Z][a-zA-Z0-9]*(?:\-[a-z][a-zA-Z0-9]*)?(?:\-\-[a-z][a-zA-Z0-9]*)?$'

  Shorthand:
    enabled: true

  SingleLinePerProperty:
    enabled: true
    allow_single_line_rule_sets: false

  SingleLinePerSelector:
    enabled: true

  SpaceAfterComma:
    enabled: true

  SpaceAfterPropertyColon:
    enabled: true
    style: one_space

  SpaceAfterPropertyName:
    enabled: true

  SpaceAfterVariableColon:
    enabled: true
    style: at_least_one_space

  SpaceAfterVariableName:
    enabled: true

  SpaceAroundOperator:
    enabled: true
    style: one_space

  SpaceBeforeBrace:
    enabled: true
    style: space
    allow_single_line_padding: true

  SpaceBetweenParens:
    enabled: true
    spaces: 0

  StringQuotes:
    enabled: true
    style: single_quotes

  TrailingSemicolon:
    enabled: true

  TrailingZero:
    enabled: true

  TransitionAll:
    enabled: false

  UnnecessaryMantissa:
    enabled: true

  UnnecessaryParentReference:
    enabled: true

  UrlFormat:
    enabled: false

  UrlQuotes:
    enabled: true

  VariableForProperty:
    enabled: false

  VendorPrefixes:
    enabled: true
    identifier_list: base
    include: []
    exclude: []

  ZeroUnit:
    enabled: true

如果你不確信 SCSS-lint 的必要性，建議閱讀以下文章：《使用 SCSS-lint 審查你的 Sass 代碼》, 《通過 theguardian.com 改善你的 Sass 代碼質(zhì)量》 和 《一份強制實施的 SCSS 代碼規(guī)范》.