#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文件中
