Sass - 擴充套件指令

擴充套件複雜選擇器

它可以擴充套件僅包含單個元素或類選擇器的選擇器。

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 在指令中

如果在 @media 中使用 @extend，則它只能擴充套件存在於相同指令塊中的選擇器。

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