Sass @extend指令
@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在指令中
如果@extend使用了@media内部，那么它可以只扩展相同的指令块内存在的选择器。
|
@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.html
<!doctype html>
<head><meta charset="UTF-8"> <title>扩展示例 - www.bootwiki.com</title>
<link rel="stylesheet" href="extend.css" type="text/css" />
</head>
<body class="container">
<h2>扩展使用实例</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:Ruby22-x64extend.scss:extend.css
接着执行上面的命令，它会自动创建extend.css文件，如下面的代码：
extend.css
.style, h2, .container {
font-size: 30px;
font-style: italic;
}
h2, .container {
color: #787878;
}
输出结果
让我们来执行以下步骤，看看上面的代码工作：
-
保存上述的HTML代码到 extend.html 文件。
-
在浏览器中打开该HTML文件，得到输出如下显示。
