scss

• 變量

變量的聲明：

$/^[A-Za-z_]+\w*/ : value

變量類型：

1. 數字（e.g. 2，3，10px）
2. 有引號或者沒有引號的文本字符（e.g. foo,"foo",'foo'）
3. 色值（e.g. blue，#333，rgba(255,255,255,0.5)）
4. 布爾型（e.g. true，false）
5. 空（e.g. null）
6. 列表值，用空格或逗號分隔（e.g. 3px solid #333, Arial, sans-serif）
7. sass 3.3.4中新增加一種數據類型map(映射類型)（e.g. $map:(key1:value1,key2:value2,key3:value3) ）

使用變量的注意事項：

1. 變量名稱首字母不可以是數字
2. 1px+1pt，此種做法雖然也可以編譯成功，但卻增加了維護人員的理解成本

• 嵌套結構：

  形如：

    .box1 {
        .box2 {
            .box3 {
                ...
            }
        }
    }

使用嵌套結構的注意事項：

1. 嵌套切忌過深，以1-2層爲宜

• mixin（宏）：

    // 定義：
    @mixmin mmm($width) {
        width: $width;
        height:100px;
    }

    // 使用：
    .box {
        @include: mmm(100px);
    }

使用mixin的注意事項：

1. mixin在命名上應當以其代碼功能命名，因其意義僅爲引用它的某個類添加某一項功能。比如現在有一個mixin，它的功能是文字超出時顯示...，那麼命名應當爲words-overflow-ellipsis，這樣維護者一看這個mixin就知道這個mixin是幹嘛的。
2. mixin的參數可以省略，省略時定義和使用都不需要加括號

• 繼承
  子類是父類的擴展，父類是子類的抽象。

    .message {
      border: 1px solid #ccc;
      padding: 10px;
      color: #333;
    }
    .success {
      @extend .message;
      border-color: green;
    }
    .error {
      @extend .message;
      border-color: red;
    }

可以看到繼承和mixin有些相像，那我們就來說一下兩者的區別：

1. 定義好的mixin無法直接使用，必須include到某個類中才會起作用；而定義好的父類則可以直接使用。
2. 何時使用mixin，何時使用繼承？僅爲某一個類添加某個功能時用mixin，兩個類有明顯繼承關係的時候用繼承。

• 註釋
  scss中的註釋有兩種，一種是單行註釋 // ，此種註釋編譯後不會存在於css文件中。另一種註釋是傳統的css註釋，即形如 /* 這裏是註釋 */ 這樣的註釋，此種註釋編譯後會存在於css文件中。推薦使用第一種註釋，因爲我們直接編寫和維護的都是scss代碼，並不接觸css代碼，所以保留註釋沒有意義，且保留註釋還會增加文件體積。

• 命名空間
  ！ 此命名空間與css中的namespace沒有任何關聯，僅是字面意思。
  我們的項目在打包時都會把所有的scss文件import到一個文件裏，最後生成一個css文件，那麼這就產生了一個問題：不同的人寫的class可能會重複名字。這個問題有兩種解決方案：第一種就是嵌套式地組織scss代碼，比如我們的項目結構如下：
  
  那麼就應該這樣嵌套

    .win {
        .implement {
            .upload{ ... }
        }
    }

這樣做就不會產生命名衝突的問題了，但是我們在前文中也講過，嵌套切忌過深。現在我們爲了組織代碼就產生了3層結構，在業務代碼中稍微嵌套一下層數就到六七層了，這會產生一定的性能問題。爲了避免這樣的問題，就有了第二種解決方案，此種解決方案從命名上入手，頂級目錄的scss就以頂級目錄命名，下層目錄以上層目錄爲前綴。以上圖爲例，win-win是頂級目錄，他的scss代碼中設置一個.win的類，業務代碼中的樣式都寫在.win這個class的內部。這個implement文件夾是win-win文件夾的子文件夾，它的樣式代碼應該都寫在.win-implement的類裏，這個upload的scss應該都用
.win-implement-upload包起來。因爲我們的項目結構最多也就嵌套3層，所以這樣做在命名上也不會太難看。關於component中的scss我建議都加上component-這樣的前綴。最後在引入的時候順次將全局變量、全局樣式、組件樣式、業務代碼樣式引進來，並添加必要的註釋，這樣一個清晰無衝突的scss結構就搭建好了。

這裏我有幾點書寫scss的建議：

1. 添加適量的註釋
2. 儘量少嵌套
3. 儘量不要用元素和ID選擇器。樣式代碼應當只與HTML中的class有關係，不能因爲我把ul換成ol這個代碼就不work了。正確的做法是給ul添加一個xxlist的class，今後不管我把ul變成什麼了，只要把這個xxlist的class加上，我的代碼就能立刻work。樣式代碼與HTML代碼耦合越緊，所帶來的維護難度就越大。在代碼中爲了避免嵌套可以使用加前綴的class，前綴以邏輯上的父級的class 爲宜。
4. 類的命名：類命名應當以其本質命名，而非表現。換句話說，class應當是一個事物是什麼，而非它有什麼或者能做什麼。舉個例子，class：人；It’s a good class.class：有手；It’s a bad class。如果說僅僅是爲了符合標準，那我們這麼做的意義其實並沒有那麼大。那麼我們這樣做的好處在哪裏呢？
5. 一定不要出現box1這樣的class。哪怕你的命名加了很多個前綴也比無意義要強。比如xx-error-link-xx-xx，這樣你寫出來的class雖然醜了點，但最起碼還是可維護的。
6. css是不區分大小寫的，所以不要使用駝峯命名法。