現(xiàn)在，我們的HTML看起來(lái)像：

<span><span>.meal-box</span> {
</span>  <span>color: #333;
</span>  <span>border: 1px solid #bbb;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>margin: 0 0 10px;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.breakfast</span> {
</span>  <span><span>@extend .meal-box;</span>
</span><span>}
</span>
<span><span>.lunch</span> {
</span>  <span><span>@extend .meal-box;</span>
</span>  <span>background-color: yellow;
</span><span>}
</span>
<span><span>.dinner</span> {
</span>  <span><span>@extend .meal-box;</span>
</span>  <span>background-color: orange;
</span><span>}</span>

<span><span>.candy</span> {
</span>  <span>background-color: black;
</span>  <span>border: 1px solid red;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.strawberry-candy</span> {
</span>  <span>background-color: #ff6666;
</span>  <span>color: white;
</span><span>}</span>

<span><span><span><div</span> class<span>="candy strawberry-candy"</span>></span>
</span>  This is the strawberry candy!
<span><span><span></div</span>></span></span>

這是：

然後我們可以在HTML中使用的

<span><span><span><div</span> class<span>="candy strawberry-candy sugar-free-candy free-candy"</span>></span>
</span>  This is just an example
<span><span><span></div</span>></span></span>

<span><span>.candy</span> {
</span>  <span>background-color: black;
</span>  <span>border: 1px solid red;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.strawberry-candy</span> {
</span>  <span><span>@extend .candy;</span>
</span>  <span>background-color: #ff6666;
</span>  <span>color: white;
</span><span>}</span>

@extend

<span><span><span><div</span> class<span>="strawberry-candy"</span>></span>
</span>  This is the very sweet candy!
<span><span><span></div</span>></span></span>

清潔器HTML類(lèi)

> 從我的角度來(lái)看，在製作好產(chǎn)品時(shí)，我們不僅要考慮最終用戶(hù)的觀點(diǎn)，而且還要考慮我們開(kāi)發(fā)策略的質(zhì)量。因此，@Extend幫助我們?cè)诿總€(gè)HTML元素中以更乾淨(jìng)的方式構(gòu)造我們的課程。 >

的重複 在Web開(kāi)發(fā)中，我們?cè)贑SS樣式中始終有一些重複。因此，重複使用書(shū)面CSS源代碼可能是非常必要的。 @Extend可以幫助我們?cè)谶m當(dāng)且更清潔的情況下重複使用CSS。

> 但是，使用@Extend並非沒(méi)有危險(xiǎn)。僅當(dāng)仔細(xì)使用@Extend時(shí)，上述優(yōu)勢(shì)僅適用 - 可以過(guò)度使用 @extend，從而導(dǎo)致相反的效果。

的危險(xiǎn)

>

被編譯為：

>

<span><span>@extend .class-name;</span></span>

<span><span>.foo</span> {
</span>  <span>color: black;
</span>  <span>border: 1px solid black;
</span><span>}
</span>
<span><span>.bar</span> {
</span>  <span><span>@extend .foo;</span>
</span>  <span>background-color: red;
</span><span>}</span>

<span><span>@extend .class-name;</span></span>

>我們可以看到上面的示例更為正確和合理。我們通過(guò)僅將@Extend應(yīng)用於應(yīng)該彼此繼承的類(lèi)，從而降低了範(fàn)圍，這是由於一種類(lèi)型的對(duì)象的變體。例如，以上樣式都與不同類(lèi)型的按鈕有關(guān)。

結(jié)論

SASS是一個(gè)有價(jià)值的擴(kuò)展，可以改善我們的CSS，以使其更清潔，結(jié)構(gòu)良好，有條理且易於開(kāi)發(fā)和維護(hù)。如果您以前沒(méi)有嘗試過(guò)Sass，我強(qiáng)烈建議您使用它。當(dāng)您對(duì)Sass的基礎(chǔ)知識(shí)更加滿(mǎn)意時(shí)，我們建議閱讀Hugo Giraudel的Sitepoinp文章，介紹沒(méi)人告訴您Sass的@Extend。我們?cè)赟itePoint的Sass參考中也有整個(gè)SASS參考指南，並提供大量示例供您探索。

謝謝史蒂夫（Steve）和以西結(jié)（Ezekiel）在該帖子的第一個(gè)版本中提出錯(cuò)誤的評(píng)論中，此後已更新。 >通過(guò)SASS 中的擴(kuò)展的繼承的常見(jiàn)問(wèn)題（常見(jiàn)問(wèn)題解答）

>

>我可以在sass中的嵌套規(guī)則中使用@extend？但是，重要的是要注意，擴(kuò)展的選擇器將被插入樣式表的頂級(jí)，而不是嵌套規(guī)則範(fàn)圍內(nèi)。這是因?yàn)镾ASS遵循CSS規(guī)則，所有選擇器都必須位於文檔的最高級(jí)別。

>我如何避免“僅在規(guī)則中使用擴(kuò)展指令” SASS中的錯(cuò)誤？ ??>當(dāng)您嘗試在SASS中使用@Extend之外使用@Extend時(shí)，會(huì)發(fā)生此錯(cuò)誤。為避免此錯(cuò)誤，請(qǐng)確保您在規(guī)則集中使用@Extend。例如，您不應(yīng)該寫(xiě)“ @extend .class;”，而應(yīng)寫(xiě)入.new-class {@extend .class; }。但是，重要的是要注意，@Extend只會(huì)擴(kuò)展偽級(jí)的樣式，而不是偽級(jí)本身。這意味著，如果您使用“ @extend：hover;”，它不會(huì)為選擇器添加懸停效果，而是會(huì)擴(kuò)展：懸停偽class的樣式。

為什麼我的@extend為什麼是我的@extend不在sass？

中工作，您的@Extend無(wú)法在SASS中工作的原因有很多。一個(gè)常見(jiàn)的原因是，您要擴(kuò)展的選擇器不存在於同一文件中。另一個(gè)原因可能是您試圖在媒體查詢(xún)或嵌套規(guī)則中擴(kuò)展選擇器，而Sass不允許進(jìn)行選擇。確保檢查這些要點(diǎn)，如果您的@Extend不起作用。

>我可以在sass中使用@Extend嗎？您可以通過(guò)用逗號(hào)分開(kāi)課程來(lái)做到這一點(diǎn)。例如，“ .new-class {@extend .class1，.class2; }”將擴(kuò)展.class1和.class2的樣式。 SASS的擴(kuò)展課。您可以通過(guò)在@Extend指令之後定義新樣式來(lái)做到這一點(diǎn)。新樣式將覆蓋使用@Extend的選擇器的擴(kuò)展類(lèi)樣式。