SASS是建立在CSS之上的預處理器，用於更好地操作CSS程式碼。它包含多個指令和規則，使編寫CSS程式碼變得容易。它也包含一些非常有用的功能，如繼承、if/else語句、函數等。
在 SASS 中，我們可以將一個檔案匯入到另一個檔案中，並將一個檔案的內容用於另一個檔案。它還允許我們在多個類別之間創建繼承。我們可以使用@extend指令將一個類別繼承到另一個類別。透過在CSS中使用繼承，我們可以提高程式碼的可重複使用性。
在本教程中，我們將學習如何在SASS中從另一個檔案繼承一個類別。
使用者可以按照下面的語法將一個類別繼承到SASS中的另一個檔案中。
@import "filename";
.element {
@extend .classname;
// other css
}
我們在上面的語法中使用了@import規則來匯入檔案。之後，我們使用@extend指令用「classname」類別來擴充「element」類別。
在下面的範例中，我們示範了基本的類別繼承。在這裡，在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;
}
在下面的範例中，我們示範了多個類別的繼承。我們在「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;
}
在下面的範例中，我們示範了巢狀繼承。在 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中文網其他相關文章！
