6-3. 繼承的工作細(xì)節(jié)

跟變量和混合器不同，繼承不是僅僅用css樣式替換@extend處的代碼那么簡(jiǎn)單。為了不讓你對(duì)生成的css感覺(jué)奇怪，對(duì)這背后的工作原理有一定了解是非常重要的。

@extend背后最基本的想法是，如果.seriousError @extend .error， 那么樣式表中的任何一處.error都用.error.seriousError這一選擇器組進(jìn)行替換。這就意味著相關(guān)樣式會(huì)如預(yù)期那樣應(yīng)用到.error和.seriousError。當(dāng).error出現(xiàn)在復(fù)雜的選擇器中，比如說(shuō)h1.error.error a或者#main .sidebar input.error[type="text"]，那情況就變得復(fù)雜多了，但是不用擔(dān)心，sass已經(jīng)為你考慮到了這些。

關(guān)于@extend有兩個(gè)要點(diǎn)你應(yīng)該知道。

• 跟混合器相比，繼承生成的css代碼相對(duì)更少。因?yàn)槔^承僅僅是重復(fù)選擇器，而不會(huì)重復(fù)屬性，所以使用繼承往往比混合器生成的css體積更小。如果你非常關(guān)心你站點(diǎn)的速度，請(qǐng)牢記這一點(diǎn)。
• 繼承遵從css層疊的規(guī)則。當(dāng)兩個(gè)不同的css規(guī)則應(yīng)用到同一個(gè)html元素上時(shí)，并且這兩個(gè)不同的css規(guī)則對(duì)同一屬性的修飾存在不同的值，css層疊規(guī)則會(huì)決定應(yīng)用哪個(gè)樣式。相當(dāng)直觀:通常權(quán)重更高的選擇器勝出，如果權(quán)重相同，定義在后邊的規(guī)則勝出。

混合器本身不會(huì)引起css層疊的問(wèn)題，因?yàn)榛旌掀靼褬邮街苯臃诺搅?code>css規(guī)則中，而繼承存在樣式層疊的問(wèn)題。被繼承的樣式會(huì)保持原有定義位置和選擇器權(quán)重不變。通常來(lái)說(shuō)這并不會(huì)引起什么問(wèn)題，但是知道這點(diǎn)總沒(méi)有壞處。