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 调用的占位符，编译出来的代码会将相同的代码合并在一起。这也是我们希望看到的效果，也让你的代码变得更为干净。