編程教程Sass 擴(kuò)展指令
描述
@extend指令用于共享選擇器之間的規(guī)則和關(guān)系。它可以在一個(gè)類中擴(kuò)展所有其他類樣式，也可以應(yīng)用自己的特定樣式。以下是擴(kuò)展的類型:
| 類型和描述 | 語(yǔ)句 | 編譯代碼 |
|---|---|---|
| 擴(kuò)展復(fù)雜選擇器 它可以擴(kuò)展只包含單個(gè)元素或類選擇器的選擇器。 | h2 {font-size:40px;}.container {@extend h2}} | h2,.container {font-size:40px;} |
| 多個(gè)擴(kuò)展 多個(gè)選擇器可以由單個(gè)選擇器擴(kuò)展。 | .style{font-size:25px;font-style:italic;}h2{color:#61C8E1;}.container{@extend.style;@extendh2} | .style,.container{font-size:25px;font-style:italic;}h2,.container{color:#61C8E1;} |
鏈接擴(kuò)展 第一選擇器由第二選擇器擴(kuò)展，第二選擇器由第三選擇器擴(kuò)展，因此這被稱為鏈接擴(kuò)展。 | .style{font-size:25px;font-style:italic;}h2{color:#61C8E1;@extend.style}.container{@extendh2} | .style,h2,.container{font-size:25px;font-style:italic;}h2,.container{color:#61C8E1;} |
選擇器序列 嵌套選擇器可以自己使用@extend。 合并選擇器序列 它合并兩個(gè)序列，即一個(gè)序列延伸存在于其他序列中的另一個(gè)序列。 | .style{font-size:25px;font-style:italic;color:#61C8E1;}h2.container{@extend.style} .container.style a{font-weight:bold;}#id .example {@extenda;} | .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或類，它阻止自己的規(guī)則集呈現(xiàn)到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;} |
可選標(biāo)志 ！可選標(biāo)志用于允許@extend不創(chuàng)建任何新的選擇器。 | h2.important{@extend.style!optional;} | A blank compile page gets display. |
@extend 指令 如果@ext內(nèi)使用@extend，則它可以擴(kuò)展僅存在于相同指令塊中的選擇器。 | @mediaprint{.style{font-size:25px;font-style:italic;}.container{@extend.style;color:#61C8E1;}} | @mediaprint{.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>接下來(lái)，創(chuàng)建文件extend.scss。
extend.scss
.style{
font-size: 30px;
font-style: italic;
}
h2{
color: #787878;
@extend .style
}
.container{
@extend h2
}您可以通過(guò)使用以下命令讓SASS查看文件并在SASS文件更改時(shí)更新CSS:
sass --watch C:\ruby\lib\sass\extend.scss:extend.css
接下來(lái)執(zhí)行上面的命令，它將使用下面的代碼自動(dòng)創(chuàng)建extend.css文件:
extend.css
.style, h2, .container {
font-size: 30px;
font-style: italic;
}
h2, .container {
color: #787878;
}輸出
讓我們執(zhí)行以下步驟，看看上面的代碼如何工作:
將以上html代碼保存在extend.html文件中。
在瀏覽器中打開(kāi)此HTML文件，將顯示如下輸出。
