SCSS进阶系列之%(PLACEHOLDER使用讲解)

官方文档

官方定义如下

Sass has a special kind of selector known as a “placeholder”. It looks and acts a lot like a class selector, but it starts with a % and it's not included in the CSS output. In fact, any complex selector (the ones between the commas) that even contains a placeholder selector isn't included in the CSS, nor is any style rule whose selectors all contain placeholders. 通俗的讲：%占位符定义的语句类似与一个input里的placeholder，是不会被编译到css文件里。
那么他的意义在哪里，为什么要有这个设置这个符号呢？
它可以用来定义不一定要使用到的css语句，同时在编译的时候不占用空间
学习这里的时候有些迷惑，但看到后续代码就知道怎么回事了。
可以把他当作java、c++里的虚基类，可以使用继承的方式将其引用到你所需要的标签里.
具体用法如下：
首先定义一个PLACEHOLDER.

%toolbelt {
  box-sizing: border-box;
  border-top: 1px rgba(#000, .12) solid;
  padding: 16px 0;
  width: 100%;

  &:hover { border: 2px rgba(#000, .5) solid; }
}

不用则不会被编译，使用则会被扩展到标签里
使用案例如下：

.action-buttons {
  @extend %toolbelt;
  color: #4285f4;
}

.reset-buttons {
  @extend %toolbelt;
  color: #cddc39;
}

在想要使用这个%toolbelt的标签里用关键词使用@extend。
则对应编译后CSS文件里显示如下：

//可以看见下面这两个类都应用到了%toolbelt
//同时%toolebelt代码并没有直接被编译到css文件里，而是只被编译到使用它的标签里
.action-buttons, .reset-buttons {
  box-sizing: border-box;
  border-top: 1px rgba(0, 0, 0, 0.12) solid;
  padding: 16px 0;
  width: 100%;
}
.action-buttons:hover, .reset-buttons:hover {
  border: 2px rgba(0, 0, 0, 0.5) solid;
}

.action-buttons {
  color: #4285f4;
}

.reset-buttons {
  color: #cddc39;
}

与MIXIN的比较

有了这个占位符和mixin那么就应该明白在什么时候用哪种方式最好。
个人建议如下
通用类固定基础设置
定义%,在标签里用@extend使用
复杂类动画、需要接受参数进行变化的用MIXIN
定义mixin，在标签里用@include使用、或直接传参使用。