[Sass]佔位符%placeholder

Sass中的佔位符%placeholder功能是一個很強大，很實用的一個功能，這也是我非常喜歡的功能。他可以取代以前CSS中的基類造成的代碼冗餘的情形。因為%placeholder聲明的代碼，如果不被@extend調用的話，不會產生任何代碼。來看一個演示：

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

這段代碼沒有被@extend 調用，他並沒有產生任何代碼塊，只是靜靜的躺在你的某個SCSS 文件中。只有通過@extend 調用才會產生代碼：

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

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

.block {
  @extend %mt5;

  span {
    @extend %pt5;
  }
}

編譯出來的CSS

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

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

從編譯出來的CSS代碼可以看出，通過@extend調用的佔位符，編譯出來的代碼會將相同的代碼合併在一起。這也是我們希望看到的效果，也讓你的代碼變得更為乾淨。