在 Sass 中繼承另一個檔案中的類

---

Sass 是一個構建在 CSS 之上的預處理器，用於更好地操作 CSS 程式碼。它包含多個指令和規則，使編寫 CSS 程式碼更容易。它還包含一些非常有用的特性，例如繼承、if/else 語句、函式等。

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

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

語法

使用者可以按照以下語法在 Sass 中將一個類繼承到另一個檔案。

@import "filename";

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

我們在上面的語法中使用了 @import 規則來匯入檔案。之後，我們使用了 @extend 指令將“element”類擴充套件到“classname”類。

示例 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”檔案的所有三個類擴充套件到“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 指令類名將一個類從另一個類繼承。