添加sass/compass规则

@@ -56,44 +56,80 @@
     }
 
 -----------------------------------------------------------------------
-## SASS规则
-### 选择器嵌套
-避免不必要的嵌套。只有在需要给父元素增加样式并且有多个子元素时才考虑嵌套
+## SASS/Compass规则
+
+### 总体规则
+* 按功能和组件划分提取模块
+* 不希望被编译的模块文件名使用下划线`_`开头
+* 所有命名(Variables，Extend，Mixin等)全部使用小写字母，若有多个单词使用中划线`-`连接
+* Nest层级不可超过3层
+* 表达式规则与Js的表达式规则保持一致，操作符左右留空格保持格式一致
+
+### @import规则
+* @import引用模块时，模块名使用" "包裹并省略文件后缀；
+* 需要引用多个模块时，使用`,`分隔，,后留空格；
+* @import与样式体之间需留空行
+
+### Mixin规则
+* 参数()与mixin name之间无空格；
+* 参数列表分隔的,后留空格，参数项若有默认值，:后留空格，前无空格
+* mixin的左括号{前留空格
+* @include的mixin若需要传参数，参数列表的()与mixinname之间无空格，列表参数以,分隔，,后留空格
+* @include需要的参数列表过长时，可考虑带上键名，这样就可以忽略传参顺序
+
+### @extend最佳实践
+禁止使用后代选择器去继承css规则
+
+    //SCSS
+    .foo .bar {
+        @extend .baz;
+    }
+    .bip .baz {
+        color: red;
+    }
 
-    //GOOD
-    .content {
-        display: block;
-        > .news-article > .title {
-            font-size: 1.2em;
-        }
+    //CSS
+    .bip .baz, .bip .foo .bar, .foo .bip .bar {
+      color: red;
     }
 
-    //BAD
-    .content {
-        display: block;
-     
-        > .news-article {
-            > .title {
+Tip: SASS要保证应用到baz的样式也要用到bar，因此会生成不必要的选择器组合去覆盖各种情况
+### Nest规则
+* 避免不必要的嵌套。只有在需要给父元素增加样式并且有多个子元素时才考虑嵌套
+
+        //GOOD
+        .content {
+            display: block;
+            > .news-article > .title {
                 font-size: 1.2em;
             }
         }
-    }
 
-### 嵌套中引入 空行
+        //BAD
+        .content {
+            display: block;
+         
+            > .news-article {
+                > .title {
+                    font-size: 1.2em;
+                }
+            }
+        }
+
+* 嵌套中引入 空行
 嵌套选择器和CSS属性之间空一行。
 
-    //GOOD
-    .content {
-        display: block;
-        //SPACE HERE
-        > .news-article {
-            background-color: #eee;
+        //GOOD
+        .content {
+            display: block;
+            //SPACE HERE
+            > .news-article {
+                background-color: #eee;
+            }
         }
-    }
 
-### 嵌套顺序
+* 嵌套顺序
 当使用Sass的嵌套功能的时候，重要的是有一个明确的嵌套顺序，以下内容是一个scss块应具有的顺序：
-
 1. 当前选择器的样式属性
 2. 父级选择器的伪类选择器 (:first-letter, :hover, :active etc)
 3. 伪类元素 (:before and :after)