@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.xuhuhu.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-x64\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 @media指令
下一篇：
Sass @at-root指令