SASS是建立在CSS之上的預處理器，用于更好地操作CSS代碼。它包含多個指令和規(guī)則，使編寫CSS代碼變得容易。它還包含一些非常有用的功能，如繼承、if/else語句、函數(shù)等。
在 SASS 中，我們可以將一個文件導入到另一個文件中，并將一個文件的內(nèi)容用于另一個文件。它還允許我們在多個類之間創(chuàng)建繼承。我們可以使用@extend指令將一個類繼承到另一個類。通過在CSS中使用繼承，我們可以提高代碼的可重用性。
在本教程中，我們將學習如何在SASS中從另一個文件繼承一個類。
語法
用戶可以按照下面的語法將一個類繼承到SASS中的另一個文件中。
@import "filename";
.element {
@extend .classname;
// other css
}
登錄后復制
我們在上面的語法中使用了@import規(guī)則來導入文件。之后，我們使用@extend指令用“classname”類擴展“element”類。
示例1（基本類繼承）
在下面的示例中，我們演示了基本的類繼承。在這里，在card.scss文件中，我們添加了一個帶有一些CSS屬性的’card’類。我們可以說它包含了我們創(chuàng)建卡片所需的所有基本CSS屬性和值。
在style.scss文件中，我們使用了@import指令來導入card.scss文件。之后，我們對’card-div’和’card-container’類進行了樣式設置。同時，我們使用了@extend規(guī)則，將’card-div’和’card-container’類繼承到’card’類中。
在輸出中，我們可以觀察到繼承類的結(jié)果。此外，用戶可以在下面的示例中觀察到代碼的可重用性。
文件名 – 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 文件中，我們創(chuàng)建了兩個不同的類并添加了 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 中的另一個文件的詳細內(nèi)容，更多請關注www.92cms.cn其它相關文章！
