扩展指令

@extend 指令用于共享选择器之间的规则和关系。它可以在一个类中扩展所有其他类样式，也可以应用自己的特定样式。以下是扩展的类型:

类型

扩展复杂选择器

它可以扩展只包含单个元素或类选择器的选择器。

h2 {font-size:40px;}
.container {@extend h2}}

h2,.container {
font-size:40px;
}

多个扩展

多个选择器可以由单个选择器扩展。

.style{
  font-size: 25px;
  font-style: italic;
}
h2{
  color: #61C8E1;
}
.container{
  @extend .style;
  @extend h2
}

.style, .container {
  font-size: 25px;
  font-style: italic;
}
h2, .container {
  color: #61C8E1;
}

链接扩展

第一选择器由第二选择器扩展，第二选择器由第三选择器扩展，因此这被称为链接扩展。

.style{
 font-size: 25px;
 font-style: italic;
}

h2{
 color: #61C8E1;
 @extend .style
}

.container{
  @extend h2
}

.style, h2, .container {
 font-size: 25px;
 font-style: italic;
}
h2, .container {
  color: #61C8E1;
}

选择器序列

嵌套选择器可以自己使用@extend。

它合并两个序列，即一个序列延伸存在于其他序列中的另一个序列。

.style{
 font-size: 25px;
 font-style: italic;
 color: #61C8E1;
}

h2 .container {
 @extend .style
}

.style, h2 .container {
 font-size: 25px;
 font-style: italic;
 color: #61C8E1;
}

合并选择器序列

.container .style a {
 font-weight: bold;
}
#id .example {
 @extend a;
}

.container .style a, .container.style #id
.example, #id .container 
.style .example {
  font-weight: bold;
}

@extend - 仅选择器

它百分比字符（％）可以用于任何id或类，它阻止自己的规则集呈现到CSS。

.style a%extreme {
 font-size: 25px;
 font-style: italic;
 color: #61C8E1;
}

.container {
 @extend %extreme;
}

.style a.container {
 font-size: 25px;
 font-style: italic;
 color: #61C8E1;
}

可选标志

！可选标志用于允许 @extend 不创建任何新的选择器。

h2.important {
 @extend .style !optional;
}

A blank compile page gets display.

@extend 指令

如果 @ext 内使用 @extend ，则它可以扩展仅存在于相同指令块中的选择器。

@media print {
 .style {       font-size:25px;             font-style: italic;
 }
.container {
@extend .style;
color: #61C8E1;
 }
}


@media print {
 .style, .container {
  font-size: 25px;
  font-style: italic;
 }
 .container {
   color: #61C8E1;
  }
}

例子

以下示例演示如何在SCSS文件中使用 @extend :

extend.htm
<!doctype html>
<head>
    <title>Extend Example</title>
    <link rel="stylesheet" href="extend.css" type="text/css" />
</head>
<body class="container">
    <h2>Example using Extend</h2>
    <p class="style">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>

接下来，创建文件 extend.scss 。

extend.scss

.style{
  font-size: 30px;
  font-style: italic;
}

h2{
  color: #787878;
  @extend .style

}
.container{
  @extend h2
}

您可以通过使用以下命令让SASS查看文件并在SASS文件更改时更新CSS:

sass --watch C:\ruby\lib\sass\extend.scss:extend.css

接下来执行上面的命令，它将使用下面的代码自动创建 extend.css 文件:

extend.css
.style, h2, .container {
  font-size: 30px;
  font-style: italic;
 }

h2, .container {
 color: #787878;
}

输出

让我们执行以下步骤，看看上面的代码如何工作:

将以上html代码保存在 extend.html 文件中。
在浏览器中打开此HTML文件，将显示如下输出。

Sass rules and directives

扩展指令

扩展指令

类型

扩展复杂选择器

多个扩展

链接扩展

选择器序列

合并选择器序列

@extend - 仅选择器

可选标志

@extend 指令

例子

extend.scss

输出

选择支付方式：