PHP前端开发

将类继承到 Sass 中的另一个文件

百变鹏仔 3个月前 (09-19) #CSS
文章标签 文件

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