SASS 中的 @extend 指令是什么？

百变鹏仔 3个月前 (09-20) #CSS

文章标签指令

SASS 允许开发人员编写更具可读性的代码并以更好的方式对其进行操作。它包含多个指令，例如@media、@content、@include、@mixin、@extend等，提供了一些功能，以便开发人员可以编写比普通CSS更好的代码。

在本教程中，我们将了解 SASS 中的 @directive。 @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 指令。但是，每当我们扩展 CSS 选择器时，SASS 编译器都会出错，该选择器是在 @media 指令的选择器内的 @media 指令之外定义的。

在这里，我们在@media指令中使用“.button”CSS选择器扩展了“.small_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中创建继承链。

文章推荐

SASS 中的 @extend 指令是什么？

语法

示例1（@extend指令的基本使用）

输出

示例 2（使用 @extend 指令的继承链）

输出

示例 3（使用 @extend 指令的多重继承）

输出

示例 4（在 @media 指令内使用 @extend 指令）

输出

示例 5（占位符选择器）

输出

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写