极客笔记什么是SASS中的@extend指令
SASS允许开发人员编写更易读的代码并以更好的方式进行操作。它包含多个指令，例如@media、@content、@include、@mixin、@extend等，提供了一些功能，使开发人员能够编写比普通的CSS更好的代码。
在本教程中，我们将学习SASS中的@extend指令。@extend指令允许开发人员扩展CSS代码。然而，mixin也可以扩展CSS代码并避免重复。@extend指令还允许我们避免代码的重复。
例如，如果您有一个应用程序的通用CSS样式，并且每个位置都需要不同的字体大小，您可以扩展字体样式并添加自定义字体大小。这样，您就不需要编写重复的代码。
此外，开发人员可以使用@extend指令在CSS中实现继承，我们将通过示例学习。
语法
用户可以按照以下语法使用SASS中的@extend指令。
selector {
/* CSS code */
}
Another_CSS_selector {
@extend selector;
/* CSS code */
}
在上面的语法中，我们可以在“选择器”的声明块中编写常见的CSS。之后，我们可以在“Another_CSS_Selector”内部扩展选择器并添加其自己的代码。
示例1（@extend指令的基本用法）
在下面的示例中，我们定义了一些样式，用于具有“card”类名的HTML元素。之后，我们定义了“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;
}
输出
下面的输出展示了在使用@extend指令创建继承链时，如何应用不同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指令之外定义的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选择器。
在输出中，我们可以观察到它不包含’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中创建继承链。