6-4. 使用繼承的最佳實(shí)踐

通常使用繼承會讓你的css美觀、整潔。因?yàn)槔^承只會在生成css時(shí)復(fù)制選擇器，而不會復(fù)制大段的css屬性。但是如果你不小心，可能會讓生成的css中包含大量的選擇器復(fù)制。

避免這種情況出現(xiàn)的最好方法就是不要在css規(guī)則中使用后代選擇器(比如.foo .bar)去繼承css規(guī)則。如果你這么做，同時(shí)被繼承的css規(guī)則有通過后代選擇器修飾的樣式，生成css中的選擇器的數(shù)量很快就會失控:

.foo .bar { @extend .baz; }
.bip .baz { a: b; }

在上邊的例子中，sass必須保證應(yīng)用到.baz的樣式同時(shí)也要應(yīng)用到.foo .bar(位于class="foo"的元素內(nèi)的class="bar"的元素)。例子中有一條應(yīng)用到.bip .baz(位于class="bip"的元素內(nèi)的class="baz"的元素)的css規(guī)則。當(dāng)這條規(guī)則應(yīng)用到.foo .bar時(shí)，可能存在三種情況，如下代碼:

<!-- 繼承可能迅速變復(fù)雜 -->
<!-- Case 1 -->
<div class="foo">
  <div class="bip">
    <div class="bar">...</div>
  </div>
</div>
<!-- Case 2 -->
<div class="bip">
  <div class="foo">
    <div class="bar">...</div>
  </div>
</div>
<!-- Case 3 -->
<div class="foo bip">
  <div class="bar">...</div>
</div>

為了應(yīng)付這些情況，sass必須生成三種選擇器組合(僅僅是.bip .foo .bar不能覆蓋所有情況)。如果任何一條規(guī)則里邊的后代選擇器再長一點(diǎn)，sass需要考慮的情況就會更多。實(shí)際上sass并不總是會生成所有可能的選擇器組合，即使是這樣，選擇器的個(gè)數(shù)依然可能會變得相當(dāng)大，所以如果允許，盡可能避免這種用法。

值得一提的是，只要你想，你完全可以放心地繼承有后代選擇器修飾規(guī)則的選擇器，不管后代選擇器多長，但有一個(gè)前提就是，不要用后代選擇器去繼承。