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

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

關于@extend有兩個要點你應該知道。

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

混合器本身不會引起css層疊的問題，因為混合器把樣式直接放到了css規(guī)則中，而繼承存在樣式層疊的問題。被繼承的樣式會保持原有定義位置和選擇器權重不變。通常來說這并不會引起什么問題，但是知道這點總沒有壞處。