CSS规则集
在这里，极有可能颠覆每个人对书写 CSS 规则集的认知（根据众多规范整理而成，包括CSS Guidelines）：
- 相关联的选择器写在同一行；不相关联选择器分行书写；
- 最后一个选择器和左开大括号(
{)中间书写一个空格； - 每个声明单独一行；
- 冒号(
:)后添加空格； - 所有声明的尾部都添加一个分号 (
;)； - 右闭大括号(
})单独一行； - 右闭大括号(
})添加空行。
示例:
// 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;
}
}