在 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 文件中，我们添加了"card"类及其一些 CSS 属性。可以说，它包含了创建卡片所需的所有基本 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 指令类名将一个类从另一个类继承。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
