在这里，极有可能颠覆每个人对书写 CSS 规则集的认知（根据众多规范整理而成，包括[CSS Guidelines](http://cssguidelin.es/#anatomy-of-a-ruleset)）： * 相关联的选择器写在同一行；不相关联选择器分行书写； * 最后一个选择器和左开大括号(`{`)中间书写一个空格； * 每个声明单独一行； * 冒号(`:`)后添加空格； * 所有声明的尾部都添加一个分号 (`;`)； * 右闭大括号(`}`)单独一行； * 右闭大括号(`}`)添加空行。 示例: ~~~ // Yep .foo, .foo-bar, .baz { display: block; overflow: hidden; margin: 0 auto; } // Nope .foo, .foo-bar, .baz { display: block; overflow: hidden; margin: 0 auto } ~~~ 添加与 CSS 相关的规范时，我们需要注意： * 本地变量在其他任何变量之前声明，并和其他声明用空行分隔开； * 不需 `@content` 的混合宏在放在其他声明之前； * 嵌套选择器在新行声明； * 需要 `@content` 的混合宏在嵌套选择器后声明； * 右闭大括号(`}`)上一行无需空行； 示例: ~~~ .foo, .foo-bar, .baz { $length: 42em; @include ellipsis; @include size($length); display: block; overflow: hidden; margin: 0 auto; &:hover { color: red; } @include respond-to('small') { overflow: visible; } } ~~~ ## 扩展阅读 * [Anatomy of a Ruleset](http://cssguidelin.es/#anatomy-of-a-ruleset)