Sass->何时使用Mixins 和 Placeholders

原文：https://www.sitepoint.com/sass-mixin-placeholder/

一年半以前，我开始使用Sass的时候，对于include a mixin和extending a placeholder的区别，我花费了一些时间去理解它们。
在那个时候，单单placeholder的概念，就已经至关于一种黑魔法巫术同样让我不知其解。

若是你有一样的疑问，不要担忧，我接下来会说解释指明它们之间的区别。今天咱们会学到minxin是什么东西，和何时去使用Sass的placeholder。你会明白他们有不一样的用处，不能混淆使用。

提醒：我接下来要谈论的关于Sass的观点，一样适用于其余CSS预处理器，不论是Stylus，Less，仍是其余的。技术大多作的是一样的事情，因此彻底不用担忧这篇文章的内容，是否适合你已经选择使用的其余CSS预编译工具。

首先咱们先去熟悉和认识 Sass placeholders and mixins

Mixin it up, 混合体，封装体

一个mixin指令可让你去定义不少CSS规则。把它看作是一个function函数，方法，这个function能够有本身的参数。它会输出这些css规则内容，而不是返回一个值。下边是来自Sass官方参考里定义：

Mixins 容许本身定义样式，这些样式能够在全局样式表里重用，而不用去借助一些无语义的类，好比 .float-left。Mixins能够包含完整的CSS样式规则和其余Sass中的特性规则等。mixin还能够接收参数，不一样的参数值将产生不一样的样式规则。

在样式表中，你会见到一些CSS规则声明被重复出现了好屡次。你明白这样的代码很差，并且还知道DRY（Don't Repeat yourself）这个概念原则。如今使用mixin去改善这样的代码：

@mixin center() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
 
.container {
  @include center();
  /* Other styles here... */
}
 
/* Other styles... */
 
.image-cover {
  @include center;
}

提醒：include使用的时候，若是你不传递参数给mixin，那么能够去掉mixin名字后边的括号。好比 @include center; 其实你也能够在mixin定义的时候就把括号去掉。好比 @mixin center {}

定义了这个mixin以后，你就不用每次去重复那三行元素居中的规则。使用的时候，就去包含这个mixin。

在某些状况下，可使用一个mixin去建立一些属性组合的“缩写”。例如 width 和 height。你应该已经厌倦了重复书写这两行属性。特别是当这两个属性值同样的时候。如今咱们就使用一个mixin来解决这些问题！

@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

很简单吧。这里咱们设置hight属性的默认值和width参数的值同样。当你想定义一个元素的面积大小时，你能够这样作：

.icon {
  @include size(32px);
}
 
.cover {
  @include size(100%, 10em);
}

提醒：当我想去设置一个元素的position属性时，为了不逐个书写top, right, bottom, left这些属性。也能够去使用mixin这种很好的语法糖。

认识 Placeholder(占位符)

Placeholders 是一种奇怪的东西。它们是class，可是在Sass编译事后，并不会被输出，出如今样式表文件里。而后你会问它有什么意义。事实上，若是不是为了@extend这个指令，它都没什么意义。你能够这样去写一个placeholder:

%center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

提醒：Like a placholder, a mixin is likewise useless unless its referenced, so this section is not necessarily saying they are different in that respect, but this is only clarifying that even though it looks similar to a CSS declaration block, it won’t get compiled on its own.

placeholder的写法使用%，而不是.(点)，可是遵照class的命名规则。

若是编译Sass文件，placeholder的代码不会出如今生成的css的文件里。正如我说过的，placeholder的代码不会被编译出如今css源文件里。

placeholder 要经过 @extend 去使用。@extend指令的做用是继承一个CSS选择器的属性或者一个Sass的placeholder代码。例如：

.container {
  @extend %center;
}

这样以后，Sass会得到%center这个placeholder的内容给.container 这个类。

另外，你还能够extend一个CSS class，就像这样：

.table-zebra {
  @extend .table;
 
  tr:nth-of-type(even) {
    background: rgba(0,0,0,.5);
  }
}

这是@extend的经常使用法。当你使用模块组件化开发一个网站或者应用，继承选择器是便利的。

使用哪个

咱们应该使用哪个，mixin仍是placeholder。要看具体使用场景。
最好的建议是：若是你须要参数变量，使用mixin。不然，继承一个placehodler。这样作两个缘由：

第一，在placeholder里面，不能像mixin那样传递使用参数变量。可是可使用全局变量。

第二，当你使用mixin时，Sass会重复输出这个mixin的属性规则内容，不会让CSS选择器公用这个mixin。这样的话，样式表将会变得很大。

@mixin center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
 
.container {
  @include center;
}
 
.image-cover {
  @include center;
}

输出以下：

.container {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
 
.image-cover {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

看到重复的CSS了吧。若是只有三行代码重复的话，感受好像问题还不是很糟糕。可是若是这个mixin有300行呢。重复的代码就太多了。那让咱们使用placeholder改造一下这个示例：

%center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
 
.container {
  @extend %center;
}
 
.image-cover {
  @extend %center;
}

下边是生成的CSS：

.container, 
.image-cover {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

看起来好多了吧。这样就避免了老是重复相同的属性规则，使用placeholder，会让整个样式表文件很瘦。

另外，若是你在不一样的地方都要使用一些属性，可是这些属性的值是变量决定的，那么mixin是一个好的选择。若是你的CSS属性同时有固定的和变更的值，那么你能够组合使用mixin和placeholder。例如：

%center {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
 
@mixin skin($color, $size) {
  @extend %center;
  background: $color;
  height: $size;
}
 
a { @include skin(pink, 10em) }
b { @include skin(blue, 90px) }

在这个示例里边，mixin继承了placeholder, 生成了干净不重复的CSS：

a, b {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
 
a {
  background: pink;
  height: 10em;
}
 
b {
  background: blue;
  height: 90px;
}

总结

但愿你已经清楚了什么是mixins和placeholders，并且知道何时去使用它们和它们编译以后的效果。