Sass 扩展指令
2018-12-30 16:59 更新
描述
@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; } |
可选标志 ！可选标志用于允许 @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文件，将显示如下输出。
以上内容是否对您有帮助：
更多建议：