Sass學習之路(8)——拓展/繼承/佔位符

1.拓展/繼承

Sass中和CSS一樣，也具有繼承的用戶，也是繼承類中的樣式代碼塊。Sass中是通過關鍵詞"@extend"來繼承已存在的類樣式塊，從而實現代碼的繼承。

舉個栗子：

//SCSS
.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

這裏.btn-primary和.btn-second都繼承了.btn中的代碼，編譯之後如下:

//CSS
.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
}

.btn-second {
  background-clor: orange;
  color: #fff;
}

從代碼中可以看出，繼承之後的代碼編譯出來的CSS中，出色地講樣式相同的選擇器合併在了一起，這算是繼承與混合宏比較最大的優點。

2.佔位符 %placeholder

佔位符也是一個非常強大的功能，和繼承也有着密切的關係。比如說，我們有多個類都有相同的代碼共有，需要繼承同一個基類。但是基類本身並不存在或者基類自身並不需要這些樣式，那麼像上邊繼承的寫法有產生了代碼的冗餘，最終會編譯出多餘的代碼。

這個時候，佔位符的作用就體現出來了，用佔位符聲明的代碼，在不被@extend調用的情況下，是不會產生任何代碼的，舉個栗子：

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

.btn {
  @extend %mt5;
  @extend %pt5;
}

.block {
  @extend %mt5;

  span {
    @extend %pt5;
  }
}

上邊我們用佔位符聲明瞭兩個用來被繼承的類%mt5和%pt5,在再讓我們來看看編譯後的代碼吧:

//CSS
.btn, .block {
  margin-top: 5px;
}

.btn, .block span {
  padding-top: 5px;
}

我們會發現，編譯後的代碼和上邊的繼承一樣，出色的完成了代碼合併，且基類並沒有被編譯出來，只作用與調用了它的類中。

3.混合宏、繼承、佔位符的比較：

混合宏：可以傳參數，但是代碼冗餘，相同樣式不會合並選擇器。所以適合在我們多次使用相同樣式，但是值不同的情況下使用。

繼承：不能傳參數，代碼會自動合併，不會冗餘。適合於不需要傳參的情況下複用代碼，並且基類代碼具有作用的情況。

佔位符：同上，但是區別是在基類沒有作用的情況下使用。