SASS 中的 @extend 指令是什麼？

SASS 允許開發人員編寫更具可讀性的程式碼並以更好的方式對其進行操作。它包含多個指令，例如@media、@content、@include、@mixin、@extend等，提供了一些功能，以便開發人員可以編寫比普通CSS更好的程式碼。

在本教程中，我們將了解 SASS 中的 @directive。 @extend 指令可讓開發人員擴展 CSS 程式碼。然而，mixin 也擴展了 CSS 程式碼並避免重複。 @extend 指令也允許我們避免程式碼的重複。

例如，如果應用程式的字體有一個通用的 CSS，並且每個地方都需要不同的字體大小，則可以擴展字體樣式並添加自訂字體大小。這樣就不需要寫重複的程式碼了。

此外，開發人員可以使用@extend指令在CSS中實現繼承，我們將透過範例來學習。

文法

使用者可以依照下列語法在 SASS 中使用 @extend 指令。

selector {
   /* CSS code */
}
Another_CSS_selector {
   @extend selector;
   /* CSS code */
}

在上面的語法中，我們可以在「選擇器」的宣告區塊中編寫常見的CSS。之後，我們可以在“Another_CSS_Selector”內部擴展選擇器並添加自己的程式碼。

範例1（@extend指令的基本使用）

在下面的範例中，我們為具有「card」類別名稱的 HTML 元素定義了一些樣式。之後，我們為「small_card」和「large_Card」元素定義了 CSS。我們在兩個選擇器中使用了 @extend 指令來擴展「card」選擇器的 CSS。此外，我們還在「small_card」和「large_card」選擇器中包含了一些其他 CSS，例如寬度、高度等。

.card {
   background-color: aliceblue;
   color: green;
   border: 2px solid pink;
   border-radius: 1.4rem;
}
.small_card {
   @extend .card;
   width: 100px;
   height: 100px;
   margin: 5px;
   padding: 5px;
}
.large_card {
   @extend .card;
   width: 500px;
   height: 500px;
   margin: 10px;
   padding: 10px;
}

輸出

在下面的輸出中，我們可以觀察到「card」選擇器的樣式套用到「small_card」和「large_card」選擇器。額外的 CSS 也分別應用於兩個選擇器。

.card,
.small_card,
.large_card {
   background-color: aliceblue;
   color: green;
   border: 2px solid pink;
   border-radius: 1.4rem;
}
.small_card {
   width: 100px;
   height: 100px;
   margin: 5px;
   padding: 5px;
}
.large_card {
   width: 500px;
   height: 500px;
   margin: 10px;
   padding: 10px;
}

範例 2（使用 @extend 指令的繼承鏈）

在下面的範例中，我們示範如何使用 @extend 指令建立繼承鏈。在這裡，我們在“.first”選擇器中添加了一些 CSS。之後，我們在“.second”選擇器中擴展了“.first”選擇器，並添加了一些額外的 CSS。

接下來，我們在「.third」選擇器中擴充了「.second」選擇器，在「.fourth」選擇器中擴充了「.third」選擇器。因此，這裡我們使用不同的 CSS 選擇器建立了繼承鏈。

.first {
   width: 100px;
   height: auto;
}
.second {
   @extend .first;
   color: blue;
}
.third {
   @extend .second;
   background-color: pink;
   border: 2px dotted red;
}
.fourth {
   @extend .third;
   margin: 10px;
   padding: 1rem;
}

輸出

下面的輸出顯示了當我們使用 @extend 指令建立繼承鏈時，CSS 程式碼如何應用於不同的 CSS 選擇器。

.first,
.second,
.third,
.fourth {
   width: 100px;
   height: auto;
}
.second,
.third,
.fourth {
   color: blue;
}
.third,
.fourth {
   background-color: pink;
   border: 2px dotted red;
}
.fourth {
   margin: 10px;
   padding: 1rem;
}

範例 3（使用 @extend 指令的多重繼承）

在這個範例中，我們示範如何使用 @extend 指令來使用多重繼承。多重繼承的含義是單一選擇器擴展了多個選擇器。

在這裡，我們定義了「.container」和「.main」CSS選擇器並添加了一些CSS。之後，在“.element”CSS選擇器內，我們擴充了“.container”和“.main”選擇器。

.container {
   width: 500px;
   height: 500px;
   background-color: beige;
}
.main{
   color: pink;
   float: left;
   max-width: 600px;
   max-height: 700px;
   overflow: auto;
}
.element {
   @extend .main;
   @extend .container;
   padding: 2%;
}

輸出

.container,
.element {
   width: 500px;
   height: 500px;
   background-color: beige;
}
.main,
.element {
   color: pink;
   float: left;
   max-width: 600px;
   max-height: 700px;
   overflow: auto;
}
.element {
   padding: 2%;
}

範例 4（在 @media 指令內使用 @extend 指令）

在下面的範例中，我們在 @media 指令中使用了 @extend 指令。但是，每當我們擴展 CSS 選擇器時，SASS 編譯器都會出錯，該選擇器是在 @media 指令的選擇器內的 @media 指令之外定義的。

在這裡，我們在@media指令中使用「.button」CSS選擇器擴充了「.small_button」CSS選擇器。使用者可以觀察到這裡兩個選擇器都位於 @media 指令內。

@media small_screen {
   .button {
      width: 50%;
      clear: both;
      font-size: 1.3rem;
   }
   .small_button {
      @extend .button;
      @extend .main;
      height: 25%;
   }
}

輸出

@media small_screen {
   .button,
   .small_button {
      width: 50%;
      clear: both;
      font-size: 1.3rem;
   }
   .small_button {
      height: 25%;
   }
}

範例 5（佔位符選擇器）

顧名思義，我們可以透過在選擇器名稱前面加上 (%) 符號來建立佔位符選擇器。當我們編譯SASS程式碼時，佔位符選擇器不會出現在輸出程式碼中，但它的樣式會在擴充的地方新增。

例如，我們在這裡定義了「%container」佔位符選擇器。之後，我們在「small_container」和「medium_container」內部擴充了容器選擇器。

在輸出中，我們可以觀察到它不包含“container”選擇器，但“small_container”和“large_container”包含“container”佔位符代碼。

%container {
   color: red;
   background-color: green;
   padding: 3%;
   margin: 0 auto;
}
.small_container {
   @extend %container;
   width: 100px;
   height: 100px;
}
.medium_container {
   @extend %container;
   width: 300px;
   height: 300px;
}

輸出

.small_container,
.medium_container {
   color: red;
   background-color: green;
   padding: 3%;
   margin: 0 auto;
}
.small_container {
   width: 100px;
   height: 100px;
}
.medium_container {
   width: 300px;
   height: 300px;
}

使用者在本教學中學習如何使用@extend指令。基本上，我們可以使用它來擴展樣式表並避免程式碼的重複。另外，我們可以使用@extend指令在CSS中建立繼承鏈。

以上是SASS 中的 @extend 指令是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！