Sass @extend指令

@extend指令用於共享規則和選擇器之間的關係。它可以擴展所有其他類的樣式在一個類中，也可應用於自己特定的樣式。以下是擴展的類型：

類型和說明

語法

編譯後代碼

擴展複雜的選擇器：

它可以僅由一個單一的元素或類選擇器擴展選擇器。

    h2{
        font-size: 40px;
    }
    .container{
        @extend h2
    }


h2, .container {
    font-size: 40px;
}

多個擴展:

一個以上的選擇器可以由單個選擇器進行擴展。

    .style{
    font-size: 25px;
    font-style: italic;
    }

    h2{
    color: #61C8E1;
    }

    .container{
    @extend .style;
    @extend h2
    }


.style, .container {
  font-size: 25px;
  font-style: italic;
 }
h2, .container {
    color: #61C8E1;
  }

鏈式擴展：

由第二選擇器擴展第一選擇器，和第二選擇器被第三選擇器擴展，因此這被稱爲鏈式擴展。

    .style{
    font-size: 25px;
    font-style: italic;
    }

    h2{
    color: #61C8E1;
    @extend .style
    }

    .container{
    @extend h2
    }


.style, h2, .container {
font-size: 25px;
font-style: italic;
}
h2, .container {
color: #61C8E1;
}

選擇器序列：

嵌套選擇器可以自己使用@extend。

合併選擇器序列：

它合併兩個序列，即一種序列擴展另一個序列其存在於其它序列。

    .style{
    font-size: 25px;
    font-style: italic;
    color: #61C8E1;
    }

    h2 .container {
    @extend .style
    }


    .container .style a {
      font-weight: bold;
    }
    #id .example {
      @extend a;
    }


.style, h2 .container {
  font-size: 25px;
  font-style: italic;
    color: #61C8E1;
  }


.container .style a, .container .style #id
.example, #id .container .style .example {
    font-weight: bold;
  }

@extend - 只有選擇器

它百分號(%)可以在任何地方使用ID或類，它可以防止自己的規則設置被渲染爲CSS。

    .style a%extreme {
      font-size: 25px;
      font-style: italic;
      color: #61C8E1;
    }

    .container {
      @extend %extreme;
    }


.style a.container {
  font-size: 25px;
  font-style: italic;
    color: #61C8E1;
    }

!optional 標誌

!optional標誌用來允許@extend不創造任何新的選擇器。

    h2.important {
      @extend .style !optional;
    }


A blank compile page gets display.

@extend在指令中

如果@extend使用了@media內部，那麼它可以只擴展相同的指令塊內存在的選擇器。

    @media print {
      .style {
        font-size: 25px;
        font-style: italic;
      }
      .container {
        @extend .style;
        color: #61C8E1;
      }
    }


@media print {
  .style, .container {
    font-size: 25px;
    font-style: italic;
}
  .container {
    color: #61C8E1;
    }
}

示例

下面的例子演示了在SCSS文件使用@extend：

extend.html

擴展使用實例

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

接下來，創建文件extend.scss。

extend.scss

.style{
font-size: 30px;
font-style: italic;
}

h2{
color: #787878;
@extend .style

}
.container{
@extend h2
}

可以告訴SASS監視文件，並隨時使用下面的命令更新SASS文件來修改CSS：

sass --watch C:\Ruby22-x64\extend.scss:extend.css

接着執行上面的命令，它會自動創建extend.css文件，如下面的代碼：

extend.css

.style, h2, .container {
font-size: 30px;
font-style: italic;
}

h2, .container {
color: #787878;
}

輸出結果

讓我們來執行以下步驟，看看上面的代碼工作：

• 保存上述的HTML代碼到 extend.html 文件。

• 在瀏覽器中打開該HTML文件，得到輸出如下顯示。