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.混合宏、繼承、占位符的比較：

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

繼承：不能傳參數，代碼會自動合并，不會備援。适合于不需要傳參的情況下複用代碼，并且基類代碼具有作用的情況。

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