数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究SASS 中的 @extend 指令是什么？
SASS 允许开发人员编写更易读的代码并以更好的方式操作它。它包含多个指令，例如 @media、@content、@include、@mixin、@extend 等，提供了一些功能，以便开发人员可以编写比普通 CSS 更好的代码。
在本教程中，我们将学习 SASS 中的 @指令。@extend 指令允许开发人员扩展 CSS 代码。但是，mixin 也扩展了 CSS 代码并避免重复。@extend 指令也允许我们避免代码的重复。
例如，如果您有一个应用程序字体的通用 CSS，并且需要在每个地方使用不同的字体大小，您可以扩展字体样式并添加自定义字体大小。这样，您就不需要编写重复的代码。
此外，开发人员可以使用 @extend 指令在 CSS 中实现继承，我们将在示例中学习。
语法
用户可以按照以下语法在 SASS 中使用 @extend 指令。
selector {
/* CSS code */
}
Another_CSS_selector {
@extend selector;
/* CSS code */
}
在以上语法中，我们可以在 'selector' 的声明块中编写通用 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 指令的选择器内部扩展在 @media 指令外部定义的 CSS 选择器，SASS 编译器就会报错。
在这里，我们在 @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 选择器。
在输出中，我们可以观察到它不包含 '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 中创建继承链。
110 次查看
