什么是SASS中的@extend指令?

什么是SASS中的@extend指令?

SASS允许开发者编写更易读且更好操作的代码。它包含了许多指令,如@media、@content、@include、@mixin、@extend等,提供了一些功能,使得开发者可以比普通的CSS编写更好的代码。

在本教程中,我们将学习SASS中的@directive。@extend指令允许开发者扩展CSS代码。然而,mixin也可以扩展CSS代码并避免重复。@extend指令还允许我们避免代码的重复。

例如,如果您有一个应用程序的通用CSS字体,并且在每个地方都需要不同的字体大小,则可以扩展字体样式并添加自定义字体大小。这样,您就不需要编写重复的代码。

此外,开发者可以使用@extend指令在CSS中实现继承。以下是我们通过示例学习的内容。

语法

用户可以按照以下语法在SASS中使用@extend指令。

选择器{
   /* CSS code */
}
另一个_CSS_选择器{
   @extend 选择器;
   /* CSS code */
}

在上述语法中,我们可以在“selector”的声明块中编写通用的CSS。之后,我们可以在“Another_CSS_Selector”内扩展选择器并添加它自己的代码。

示例1(@extend指令的基本用法)

在下面的示例中,我们定义了一些HTML元素与“card”类名的样式。之后,我们为“small_card”和“large_Card”元素定义了CSS。我们在两个选择器中都使用了@extend指令来扩展“card”选择器的CSS。此外,我们还在“small_card”和“large_card”选择器中包含了一些其他的CSS,如宽度、高度等。

.card {
   background-color: aliceblue;
   color: green;
   border: 2px solid pink;
   border-radius: 1.4rem;
}
.small_card {
   @extend .card;
   width: 100px;
   height: 100px;
   margin: 5px;
   padding: 5px;
}
.large_card {
   @extend .card;
   width: 500px;
   height: 500px;
   margin: 10px;
   padding: 10px;
}

输出

在以下输出中,我们可以观察到“card”选择器的样式应用于“small_card”和“large_card”选择器。额外的CSS也分别应用于两个选择器。

.card,
.small_card,
.large_card {
   background-color: aliceblue;
   color: green;
   border: 2px solid pink;
   border-radius: 1.4rem;
}
.small_card {
   width: 100px;
   height: 100px;
   margin: 5px;
   padding: 5px;
}
.large_card {
   width: 500px;
   height: 500px;
   margin: 10px;
   padding: 10px;
}

示例2(使用@extend指令创建继承链)

在下面的示例中,我们演示了如何使用@extend指令创建继承链。在此,我们在“first”选择器中添加了一些CSS。之后,我们在“second”选择器中扩展了“first”选择器并添加了一些额外的CSS。

接下来,我们在“third”选择器中扩展了“second”选择器,并在“fourth”选择器中扩展了“third”选择器。因此,在此处我们创建了使用不同CSS选择器的继承链。

.first {
   width: 100px;
   height: auto;
}
.second {
   @extend .first;
   color: blue;
}
.third {
   @extend .second;
   background-color: pink;
   border: 2px dotted red;
}
.fourth {
   @extend .third;
   margin: 10px;
   padding: 1rem;
}

输出

以下输出显示了创建继承链时如何应用于不同CSS选择器的CSS代码。

.first,
.second,
.third,
.fourth {
   width: 100px;
   height: auto;
}
.second,
.third,
.fourth {
   color: blue;
}
.third,
.fourth {
   background-color: pink;
   border: 2px dotted red;
}
.fourth {
   margin: 10px;
   padding: 1rem;
}

示例3(使用@extend指令的多重继承)

在此示例中,我们演示了如何使用@extend指令的多重继承。多重继承的含义是单个选择器有多个扩展的选择器。

在此处,我们定义了“container”和“main” CSS选择器并添加了一些CSS。之后,在“element” CSS选择器内,我们扩展了“container”和“main”选择器。

.container {
   width: 500px;
   height: 500px;
   background-color: beige;
}
.main{
   color: pink;
   float: left;
   max-width: 600px;
   max-height: 700px;
   overflow: auto;
}
.element {
   @extend .main;
   @extend .container;
   padding: 2%;
}

输出

.container,
.element {
   width: 500px;
   height: 500px;
   background-color: beige;
}
.main,
.element {
   color: pink;
   float: left;
   max-width: 600px;
   max-height: 700px;
   overflow: auto;
}
.element {
   padding: 2%;
}

示例4(在@media指令内使用@extend指令)

在下面的示例中,我们在@media指令内部使用了@extend指令。然而,每当我们在@media指令的选择器内扩展了定义在@media指令之外的CSS选择器时,SASS编译器都会出错。

在此,我们在@media指令内使用了“small_button” CSS选择器,其与“button” CSS选择器扩展了。用户可以观察到,这两个选择器都在@media指令内。

@media small_screen {
   .button {
      width: 50%;
      clear: both;
      font-size: 1.3rem;
   }
   .small_button {
      @extend .button;
      @extend .main;
      height: 25%;
   }
}

输出

@media small_screen {
   .button,
   .small_button {
      width: 50%;
      clear: both;
      font-size: 1.3rem;
   }
   .small_button {
      height: 25%;
   }
}

示例5(占位符选择器)

正如其名称所示,我们可以在选择器名称前加上(%)符号来创建占位符选择器。当我们编译SASS代码时,占位符选择器将不会出现在输出代码中,但其样式将在它被扩展的地方添加。

例如,我们在这里定义了“%container”占位符选择器。然后,我们在“small_container”和“medium_container”中扩展了容器选择器。

在输出中,我们可以观察到它不包含“container”选择器,但“small_container”和“large_container”包含“container”占位符代码。

%container {
   color: red;
   background-color: green;
   padding: 3%;
   margin: 0 auto;
}
.small_container {
   @extend %container;
   width: 100px;
   height: 100px;
}
.medium_container {
   @extend %container;
   width: 300px;
   height: 300px;
}

输出

.small_container,
.medium_container {
   color: red;
   background-color: green;
   padding: 3%;
   margin: 0 auto;
}
.small_container {
   width: 100px;
   height: 100px;
}
.medium_container {
   width: 300px;
   height: 300px;
}

在本教程中,用户学会了如何使用@extend指令。基本上,我们可以使用它来扩展样式表并避免重复的代码。此外,我们还可以使用@extend指令在CSS中创建继承链。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

CSS 教程