Sass - 扩展指令

上一页
下一页

描述

@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
}

.container .style a {
   font-weight: bold;
}

#id .example {
   @extend a;
}

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

.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;
}

!optional 标志

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

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

A blank compile page gets display.

@extend 在指令中

如果在 @media 中使用 @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
sass_rules_and_directives.htm
打印页面
上一页
下一页
广告