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; 
    }