Sass 中的占位符 %placeholder 功能是一個(gè)很強(qiáng)大，很實(shí)用的一個(gè)功能，這也是我非常喜歡的功能。他可以取代以前 CSS 中的基類造成的代碼冗余的情形。因?yàn)?%placeholder 聲明的代碼，如果不被 @extend 調(diào)用的話，不會(huì)產(chǎn)生任何代碼。來看一個(gè)演示：

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

這段代碼沒有被 @extend 調(diào)用，他并沒有產(chǎn)生任何代碼塊，只是靜靜的躺在你的某個(gè) SCSS 文件中。只有通過 @extend 調(diào)用才會(huì)產(chǎn)生代碼：

//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 調(diào)用的占位符，編譯出來的代碼會(huì)將相同的代碼合并在一起。這也是我們希望看到的效果，也讓你的代碼變得更為干凈。