6. 使用選擇器繼承來(lái)精簡(jiǎn)CSS

使用sass的時(shí)候，最后一個(gè)減少重復(fù)的主要特性就是選擇器繼承?；?code>Nicole Sullivan面向?qū)ο蟮?code>css的理念，選擇器繼承是說(shuō)一個(gè)選擇器可以繼承為另一個(gè)選擇器定義的所有樣式。這個(gè)通過(guò)@extend語(yǔ)法實(shí)現(xiàn)，如下代碼:

//通過(guò)選擇器繼承繼承樣式
.error {
  border: 1px red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

在上邊的代碼中，.seriousError將會(huì)繼承樣式表中任何位置處為.error定義的所有樣式。以class="seriousError" 修飾的html元素最終的展示效果就好像是class="seriousError error"。相關(guān)元素不僅會(huì)擁有一個(gè)3px寬的邊框，而且這個(gè)邊框?qū)⒆兂杉t色的，這個(gè)元素同時(shí)還會(huì)有一個(gè)淺紅色的背景，因?yàn)檫@些都是在.error里邊定義的樣式。

.seriousError不僅會(huì)繼承.error自身的所有樣式，任何跟.error有關(guān)的組合選擇器樣式也會(huì)被.seriousError以組合選擇器的形式繼承，如下代碼:

//.seriousError從.error繼承樣式
.error a{  //應(yīng)用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //應(yīng)用到hl.seriousError
  font-size: 1.2rem;
}

如上所示，在class="seriousError"的html元素內(nèi)的超鏈接也會(huì)變成紅色和粗體。

本節(jié)將介紹與混合器相比，哪種情況下更適合用繼承。接下來(lái)在探索繼承的工作細(xì)節(jié)之前，我們先了解一下繼承的高級(jí)用法。最后，我們將看看使用繼承可能會(huì)有哪些坑，學(xué)習(xí)如何避免這些坑。