sass揭秘之@mixin，%，@function

因为文章内含有很多sass代码，如需自己动手查看编译结果，推荐使用sassmeister这款在线编译工具，方便你阅读学习。

在阅读本文章之前，请先确认你已经阅读了上篇文章sass揭秘之变量，不然会给你带来疑惑的感觉。

其实很多人之所以对sass或less感兴趣，就是因为他们能使用变量和这个@mixin功能，而后面的%和@function知道的人就比较少了。所以说@mixin这个东西还是很有诱惑力的，没办法，广告做得好啊，大明星。这里之所以把%和@function和@mixin放在一起，当然并非无缘无故，一看@mixin和@function就是兄弟，长得那么像，而%这个后起之秀，更是在一定程度上抢了@mixin的不少风头。

这里先说@mixin和%，谁让它们有竞争关系呢，哈哈。@function这个家伙一看就是函数，先闪一边去。 首先@mixin可以传递参数，而%不行；然后@mixin的调用方式是@include，而%的调用方式是@extend；最后@include产生的样式是以复制拷贝的方式存在的，而@extend产生的样式是以组合申明的方式存在的。概念简单讲解完毕，现在进入代码实例，上战场才是真理。

 

为了方面测试，我们先约定建立一个_mixin.scss文件，下面所有的有关@mixin，%和@function的一些定义全部写在这里，再建立一个style.scss来调用我们的_mixin.scss文件，所以在style的里面先写上一句@import 'mixin';

@mixin

先来一段无参数简单版本的@mixin（@mixin，%，@function全部放在_mixin.scss文件中）：

// block得有宽度margin左右为auto才能居中
@mixin center-block {
  margin-left: auto;
  margin-right: auto;
}

这应该是最简单版本的@mixin了，不但没有参数，连样式都只有两条，不过还是很实用的。接下来我们来调用下（调用的全部放在style.scss文件中，先导入_mixin文件）：

@import 'mixin';    
#header{
    width:1000px;
    @include center-block;
}
.gallery{
    width:600px;
    @include center-block;
}

解析成的css：

#header {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.gallery {
  width: 600px;
  margin-left: auto;
  margin-right: auto;
}

很显然，上面两个margin左右为auto在各自的选择器中，当然运行是没有问题的，但是如果把这两个一样样式提出来组合申明下多好啊，一看质量就不一样了吗，高端大气上档次了哈哈。这个问题稍后留给我们的%来解决，我们继续@mxixin。

再来个无参数版的，但是包含浏览器兼容方面的：

$lte7:true !default;//是否兼容ie6,7

// inline-block
// ie6-7 *display: inline;*zoom:1;
@mixin inline-block {
  display: inline-block;
  @if $lte7 {
    *display: inline;*zoom:1;
  }
}

上面的代码，有个$lte7全局变量，我们把这个变量提到_mixin.scss文件的最上面。注意这里@mixin里面有个@if判断，这是为ie6,7对inline-block部分不兼容的一个处理，默认$lte7为true，意思是需要兼容ie6,7，那么就会输出判断里面的代码*display: inline;*zoom:1;，当我们不需要兼容的时候呢，话说高富帅搞的就是搞ie8+的，那设置$lte7为false就没*display: inline;*zoom:1;这两个家伙的事了，直接宣布其斩立决了。代码为证：

$lte7:false;    
@import 'mixin';    

.inline-block{
    @include inline-block;
}

这里注意：因为我们要重设$lte7为false，所以在@import 'mixin';之前先定义下$lte7:false;，这涉及到变量默认值的使用，如果你不了解请先查阅sass揭秘之变量

解析成的css：

.inline-block{
    display:inline-block;
}

当然如果没有$lte7:false;这个提前申明变量，那么解析成的css应该是这样的：

.inline-block{
    display:inline-block;
    *display: inline;*zoom:1;
}

从上面可以看出，如果@mixin里面放点判断，对浏览器的兼容还可以做点有意义的事，不用每次都写一大坨，同时还为以后升级带来一个暗门，直接改变下变量的值重新解析下就ok了，那些为兼容处理的代码统统消失，这比较爽。测试完这个之后，请把$lte7:false;删掉，因为后面还要用到其值true。

现在来个参数简单版的：

@mixin float($float:left) {
  float: $float;
  @if $lte7 {
    display: inline;
  }
}

够简单吧，float人人皆知啊。这里$float参数有默认值为left，我们调用下：

.fl{
    @include float;
}
.fr{
    @include float(right);
}

解析成的css：

.fl{
    float:left;
    display: inline;
}
.fr{
    float:right;
    display: inline;
}

因为在传参数的时候$float设置了一个默认值为left，所以调用的时候@include float;和@include float(left);能产生一样的代码。这里先说下我琢磨出来的一个经验，如果某个@mixin无法设置默认的参数，那么这个@mixin要么可以用%来取代，要么就是个鸡肋@mixin，所以请定义@mixin的时候参考这两点判断是否有必要，特殊情况除外。

关于鸡肋@mixin等下再说，我们接着说下多个参数的@mixin：

// 禁用样式，加!important
@mixin disabled($bgColor:#e6e6e6,$textColor:#ababab){
  background-color: $bgColor !important;
  color: $textColor !important;
  cursor: not-allowed !important;
}

两个参数，一个为背景色，一个为文本色，两个冒号后面的分别为默认值，直接调用@include diasbled;使用的就是默认值，虽然简单，我们还是调用下吧。

.disabled{
    @include disabled;
}

解析后的css：

.disabled {
  background-color: #e6e6e6 !important;
  color: #ababab !important;
  cursor: not-allowed !important;
}

接着下一个实例，一个属性可以有多个属性值的，写到这里，看过sass揭秘之变量的人就想起来了，原来是传参的时候变量得加