Sass 延伸

深渊向深渊呼唤

样式继承 @extend

在设计网页的时候常常遇到这种情况:一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class,一个通用样式,一个特殊样式。

比如下面的普通错误样式和严重错误样式的对比:

    // HTML 代码
    <div >
      样式继承 @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; 
    }
栏目