W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
跟變量和混合器不同,繼承不是僅僅用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)重不變。通常來說這并不會引起什么問題,但是知道這點總沒有壞處。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: