◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
将类继承到 Sass 中的另一个文件
ID:13670 / 打印
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文件中，我们添加了一个带有一些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”文件的所有 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指令类名从一个类继承另一个类。
