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/)