SCSS-Lint · Sass Guidelines（中文版）

審查代碼是非常重要的事情。通常來說，遵從一份樣式指南的規范可以幫助減少代碼質量上的問題，但是沒有人的工作是無懈可擊的，何況總有些地方需要改善。所以，可以認為，審查代碼和注釋文檔一樣重要。 [SCSS-lint](https://github.com/causes/scss-lint)?是一個幫你保持 SCSS 文件簡潔而又具有可讀性的工具。它是完全可定制化的，并且非常易于和其他工具集成。幸運的是，本文檔的描述非常類似于 SCSS-lint 的使用建議。為了根據 Sass 樣式指南配置 SCSS-lint，建議如下配置： ~~~ # For SCSS-Lint v0.32.0 linters: BangFormat: enabled: true space_before_bang: true space_after_bang: false BorderZero: enabled: true ColorKeyword: enabled: false Comment: enabled: false DebugStatement: enabled: true DeclarationOrder: enabled: true DuplicateProperty: enabled: false ElsePlacement: enabled: true style: same_line EmptyLineBetweenBlocks: enabled: true ignore_single_line_blocks: false EmptyRule: enabled: true FinalNewline: enabled: true present: true HexLength: enabled: true style: short HexNotation: enabled: true style: lowercase HexValidation: enabled: true IdSelector: enabled: true ImportPath: enabled: true leading_underscore: false filename_extension: false Indentation: enabled: 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: 3 PlaceholderInExtend: enabled: true PropertySortOrder: enabled: false ignore_unspecified: false PropertySpelling: enabled: true extra_properties: [] 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 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 UnnecessaryMantissa: enabled: true UnnecessaryParentReference: enabled: true UrlFormat: enabled: false UrlQuotes: enabled: true VendorPrefixes: enabled: true identifier_list: base include: [] exclude: [] ZeroUnit: enabled: true ~~~ 如果你想將 SCSS-lint 插入到 Grunt 構建過程中，那么 Grunt 插件[grunt-scss-lint](https://github.com/ahmednuaman/grunt-scss-lint)?一定會對你有所幫助。此外，如果你在尋找一個運行 SCSS-lint 的簡潔工具，那么?[Thoughtbot](http://thoughtbot.com/)(Bourbon, Neat...) 正在開發的?[Hound](https://houndci.com/)?也會對你有所幫助。 ## 擴展閱讀 * [SCSS-lint](https://github.com/causes/scss-lint) * [Clean Up your Sass with SCSS-lint](http://blog.martinhujer.cz/clean-up-your-sass-with-scss-lint/) * [Improving Sass code quality on theguardian.com](http://www.theguardian.com/info/developer-blog/2014/may/13/improving-sass-code-quality-on-theguardiancom) * [grunt-scss-lint](https://github.com/ahmednuaman/grunt-scss-lint) * [An Auto-Enforceable SCSS Styleguide](http://davidtheclark.com/scss-lint-styleguide/)