將類別繼承到 Sass 中的另一個文件

SASS是建立在CSS之上的預處理器，用於更好地操作CSS程式碼。它包含多個指令和規則，使編寫CSS程式碼變得容易。它也包含一些非常有用的功能，如繼承、if/else語句、函數等。

在 SASS 中，我們可以將一個檔案匯入到另一個檔案中，並將一個檔案的內容用於另一個檔案。它還允許我們在多個類別之間創建繼承。我們可以使用@extend指令將一個類別繼承到另一個類別。透過在CSS中使用繼承，我們可以提高程式碼的可重複使用性。

在本教程中，我們將學習如何在SASS中從另一個檔案繼承一個類別。

文法

使用者可以按照下面的語法將一個類別繼承到SASS中的另一個檔案中。

@import "filename";

.element {
   @extend .classname;
   // other css
}

我們在上面的語法中使用了@import規則來匯入檔案。之後，我們使用@extend指令用「classname」類別來擴充「element」類別。

範例1（基本類別繼承）

在下面的範例中，我們示範了基本的類別繼承。在這裡，在card.scss檔案中，我們新增了一個帶有一些CSS屬性的'card'類別。我們可以說它包含了我們創建卡片所需的所有基本CSS屬性和值。

在style.scss檔案中，我們使用了@import指令來匯入card.scss檔。之後，我們對'card-div'和'card-container'類別進行了樣式設定。同時，我們使用了@extend規則，將'card-div'和'card-container'類別繼承到'card'類別中。

在輸出中，我們可以觀察到繼承類別的結果。此外，使用者可以在下面的範例中觀察到程式碼的可重用性。

檔名 - card.scss

.card {
   background-color: aliceblue;
   border: 1px solid #ccc;
   border-radius: 5px;
   padding: 10px;
   margin: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

檔名 – style.scss

@import "card";

.card-container {
   @extend .card;
   width: 300px;
   height: 300px;
}
.card-div {
   @extend .card;
   width: 200px;
   height: 200px;
}

輸出

.card,
.card-container,
.card-div {
   background-color: aliceblue;
   border: 1px solid #ccc;
   border-radius: 5px;
   padding: 10px;
   margin: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.card-container {
   width: 300px;
   height: 300px;
}

.card-div {
   width: 200px;
   height: 200px;
}

範例2（繼承多個類別）

在下面的範例中，我們示範了多個類別的繼承。我們在「specs.scss」檔案中新增了包含 CSS 屬性的不同類別。在 style.scss 檔案中，我們導入了「specs.scss」檔案。此外，我們使用 @extend 指令將「specs.scss」檔案的所有 3 個類別擴展為「div」類別。因此，我們從另一個文件繼承了多個類別到一個類別中。

檔名 - specs.scss

.margin {
   margin-top: 10px;
   margin-left: 10px;
}
.padding {
   padding-top: 10px;
   padding-left: 10px;
}
.size {
   font-size: 20px;
}

檔名 – style.scss

@import "specs";

.div {
   @extend .margin;
   @extend .padding;
   @extend .size;
   width: 300px;
   height: 300px;
   border: 2px dotted blue;
   border-radius: 12px;
}

輸出

.margin,
.div {
   margin-top: 10px;
   margin-left: 10px;
}
.padding,
.div {
   padding-top: 10px;
   padding-left: 10px;
}
.size,
.div {
   font-size: 20px;
}
.div {
   width: 300px;
   height: 300px;
   border: 2px dotted blue;
   border-radius: 12px;
}

範例 3（巢狀繼承）

在下面的範例中，我們示範了巢狀繼承。在 form.scss 檔案中，我們建立了兩個不同的類別並新增了 CSS 屬性。

在style.scss檔中，我們透過'form-field'類繼承了'form-group'類，並加入了'form-input'類。 'input-field'類別繼承了'form-input'類別。所以，我們使用了嵌套繼承的類別。

檔名 - form.scss

// form.scss
.form-field {
   margin-bottom: 20px;
}
input-field {
   border: 1px solid #cccccc;
   padding: 5px;
}

檔名 – style.scss

@import 'fonts';

.form-group {
   @extend .form-field;

   .form-input {
      @extend .input-field;
   }
}

輸出

.form-field,
.form-group {
   margin-bottom: 20px;
}
.input-field,
.form-group .form-input {
   border: 1px solid #cccccc;
   padding: 5px;
}

使用者學會了在 SASS 中將類別從一個檔案繼承到另一個檔案。使用者需要導入包含該類別的文件，並使用@extend指令類別名稱從一個類別繼承另一個類別。

以上是將類別繼承到 Sass 中的另一個文件的詳細內容。更多資訊請關注PHP中文網其他相關文章！