在 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 指令类名将一个类从另一个类继承。