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

2018-08-11 21:06 更新

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

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

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

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

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

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號