6-1. 何時(shí)使用繼承
5-1節(jié)介紹了混合器主要用于展示性樣式的重用,而類(lèi)名用于語(yǔ)義化樣式的重用。因?yàn)槔^承是基于類(lèi)的(有時(shí)是基于其他類(lèi)型的選擇器),所以繼承應(yīng)該是建立在語(yǔ)義化的關(guān)系上。當(dāng)一個(gè)元素?fù)碛械念?lèi)(比如說(shuō).seriousError
)表明它屬于另一個(gè)類(lèi)(比如說(shuō).error
),這時(shí)使用繼承再合適不過(guò)了。
這有點(diǎn)抽象,所以我們從幾個(gè)方面來(lái)闡釋一下。想象一下你正在編寫(xiě)一個(gè)頁(yè)面,給html
元素添加類(lèi)名,你發(fā)現(xiàn)你的某個(gè)類(lèi)(比如說(shuō).seriousError
)是另一個(gè)類(lèi)(比如說(shuō).error
)的細(xì)化。你會(huì)怎么做?
- 你可以為這兩個(gè)類(lèi)分別寫(xiě)相同的樣式,但是如果有大量的重復(fù)怎么辦?使用
sass
時(shí),我們提倡的就是不要做重復(fù)的工作。 - 你可以使用一個(gè)選擇器組(比如說(shuō)
.error
.seriousError
)給這兩個(gè)選擇器寫(xiě)相同的樣式。如果.error的所有樣式都在同一個(gè)地方,這種做法很好,但是如果是分散在樣式表的不同地方呢?再這樣做就困難多了。 - 你可以使用一個(gè)混合器為這兩個(gè)類(lèi)提供相同的樣式,但當(dāng)
.error
的樣式修飾遍布樣式表中各處時(shí),這種做法面臨著跟使用選擇器組一樣的問(wèn)題。這兩個(gè)類(lèi)也不是恰好有相同的樣式。你應(yīng)該更清晰地表達(dá)這種關(guān)系。 - 綜上所述你應(yīng)該使用
@extend
。讓.seriousError
從.error
繼承樣式,使兩者之間的關(guān)系非常清晰。更重要的是無(wú)論你在樣式表的哪里使用.error
.seriousError
都會(huì)繼承其中的樣式。
現(xiàn)在你已經(jīng)更好地掌握了何時(shí)使用繼承,以及繼承有哪些突出的優(yōu)點(diǎn),接下來(lái)我們看看一些高級(jí)用法。