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