@extend 指令用于共享選擇器之間的規(guī)則和關(guān)系。 它可以在一個類中擴(kuò)展所有其他類樣式,也可以應(yīng)用自己的特定樣式。 以下是擴(kuò)展的類型:
類型和描述 | 語句 | 編譯代碼 |
---|---|---|
擴(kuò)展復(fù)雜選擇器 它可以擴(kuò)展只包含單個元素或類選擇器的選擇器。 | h2 {font-size:40px;} .container {@extend h2}} | h2,.container { font-size:40px; } |
多個擴(kuò)展 多個選擇器可以由單個選擇器擴(kuò)展。 | .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; } |
鏈接擴(kuò)展 第一選擇器由第二選擇器擴(kuò)展,第二選擇器由第三選擇器擴(kuò)展,因此這被稱為鏈接擴(kuò)展。 | .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或類,它阻止自己的規(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ò)展僅存在于相同指令塊中的選擇器。 | @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>
接下來,創(chuàng)建文件 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
接下來執(zhí)行上面的命令,它將使用下面的代碼自動創(chuàng)建 extend.css 文件:
.style, h2, .container { font-size: 30px; font-style: italic; } h2, .container { color: #787878; }
讓我們執(zhí)行以下步驟,看看上面的代碼如何工作:
將以上html代碼保存在 extend.html 文件中。
在瀏覽器中打開此HTML文件,將顯示如下輸出。
更多建議: