#SCSS规范
---
###代码组织
每个文件的代码必须按如下形式按顺序组织：
1. @import
2. 变量声明
3. 样式声明
```css
@import "dialog";
$t1 : #333333;
.page {
width: 960px;
margin: 0 auto;
background: $t1;
}
```
###@import 语句
@import 语句需要放在文件头上
@import 引入的文件不需要开头的'_'和结尾的'.scss'；
```css
/* not good */
@import "_dialog.scss";
/* good */
@import "dialog";
```
###避免嵌套层级过多
* 将嵌套深度限制在4层。对于超过4层的嵌套，给予重新评估。这可以避免出现过于详实的CSS选择器。
* 避免大量的嵌套规则。当可读性受到影响时，将之打断。推荐避免出现多于20行的嵌套规则出现。
>嵌套最多不能超过4层；
###杂项
提交的代码中不要有 @debug；
声明顺序：
* @extend
* 不包含 @content 的 @include
* 包含 @content 的 @include
* 自身属性
* 嵌套规则
@extend 中使用placeholder选择器；
去掉不必要的父级引用符号'&'
```css
/* not good */
.fatal {
@extend .error;
}
/* good */
.fatal {
@extend %error;
}
/* not good */
.element {
& > .dialog {
...
}
}
/* good */
.element {
> .dialog {
...
}
}
```
###避免重复引用相同文件
如果多个文件都需要引用相同的scss文件，建议将其提出放入common.scss文件中
