描述
该@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-仅选择器 它的percent character（％）可以在id或class的任何地方使用，它可以防止将自己的规则集呈现给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的使用：
扩展名
<!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。
扩展
.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;
}作者：terry，如若转载，请注明出处：https://www.web176.com/sass/1714.html
支付宝 
微信 