在這里，極有可能顛覆每個人對書寫 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)