Sass 延伸

樣式繼承 @extend

在設計網頁的時候經常遇到這種狀況：一個元素使用的樣式與另外一個元素徹底相同，但又添加了額外的樣式。一般會在 HTML 中給元素定義兩個 class，一個通用樣式，一個特殊樣式。

好比下面的普通錯誤樣式和嚴重錯誤樣式的對比：

// HTML 代碼
    <div class="error seriousError">
      樣式繼承 @extend！
    </div>
    
    // 未使用@extend 的普通樣式和嚴重樣式
    .error {
      border: 1px #f00;
      background-color: #fdd;
    }
    .seriousError {
      border-width: 3px;
    }
    
    // 使用了@extend 的普通樣式和嚴重樣式
    .error {
      border: 1px #f00;
      background-color: #fdd;
    }
    .seriousError {
      @extend .error;
      border-width: 3px;
    }

.error 下的全部樣式繼承給 .seriousError，而 border-width: 3px; 是單獨定義的，這個時候使用 .seriousError 就能夠再也不使用 .error。

多重延伸 (Multiple Extends)

同一個選擇器能夠延伸給多個選擇器，它所包含的屬性將繼承給全部被延伸的選擇器：

// .scss 語法
    .error {
      border: 1px #f00;
      background-color: #fdd;
    }
    .attention {
      font-size: 3em;
      background-color: #ff0;
    }
    .seriousError {
      @extend .error;
      @extend .attention;
      border-width: 3px;
    }
    
    // 編譯後的 css
    .error, .seriousError {
      border: 1px #f00;
      background-color: #fdd; 
    }
    .attention, .seriousError {
      font-size: 3em;
      background-color: #ff0;
    }
    .seriousError {
      border-width: 3px; 
    }

繼續延伸 (Chaining Extends)

當一個選擇器延伸給第二個後，能夠繼續選擇第二個選擇器延伸給第三個（在使用 @extend 時，必須在同一塊域內 ）。

// .scss 語法
    .error {
      border: 1px #f00;
      background-color: #fdd;
    }
    .seriousError {
      @extend .error;
      border-width: 3px;
    }
    .criticalError {
      @extend .seriousError;
      position: fixed;
      top: 10%;
      bottom: 10%;
      left: 10%;
      right: 10%;   
      
    .error, .seriousError, .criticalError {
      border: 1px #f00;
      background-color: #fdd; 
    }
    .seriousError, .criticalError {
      border-width: 3px;
    }
    .criticalError {
      position: fixed;
      top: 10%;
      bottom: 10%;
      left: 10%;
      right: 10%; 
    }

佔位符選擇器

佔位符選擇器須要經過延伸指令使用，用法和 class 或者是 id 選擇器同樣，北延伸後，佔位符選擇器自己不會被編譯。

.notice {
      @extend %extreme;
    }
    
    // 編譯 css
    #context a.notice {
      color: blue;
      font-weight: bold;
      font-size: 2em; 
    }