使用sass
的時候,最后一個減少重復的主要特性就是選擇器繼承?;?code>Nicole Sullivan面向對象的css
的理念,選擇器繼承是說一個選擇器可以繼承為另一個選擇器定義的所有樣式。這個通過@extend
語法實現,如下代碼:
//通過選擇器繼承繼承樣式
.error {
border: 1px red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
在上邊的代碼中,.seriousError
將會繼承樣式表中任何位置處為.error
定義的所有樣式。以class="seriousError"
修飾的html
元素最終的展示效果就好像是class="seriousError error"
。相關元素不僅會擁有一個3px
寬的邊框,而且這個邊框將變成紅色的,這個元素同時還會有一個淺紅色的背景,因為這些都是在.error
里邊定義的樣式。
.seriousError
不僅會繼承.error
自身的所有樣式,任何跟.error
有關的組合選擇器樣式也會被.seriousError
以組合選擇器的形式繼承,如下代碼:
//.seriousError從.error繼承樣式
.error a{ //應用到.seriousError a
color: red;
font-weight: 100;
}
h1.error { //應用到hl.seriousError
font-size: 1.2rem;
}
如上所示,在class="seriousError"
的html
元素內的超鏈接也會變成紅色和粗體。
本節(jié)將介紹與混合器相比,哪種情況下更適合用繼承。接下來在探索繼承的工作細節(jié)之前,我們先了解一下繼承的高級用法。最后,我們將看看使用繼承可能會有哪些坑,學習如何避免這些坑。
更多建議: