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揭秘之变量的人就想起来了，原来是传参的时候变量得加...:

//错误定义方法 @mixin box-shadow($shadow){ -webkit-box-shadow:$shadow; -moz-box-shadow:$shadow; box-shadow:$shadow; } 

为了给人说明这...，有必要先搞个错误的东西，那样你就会恍然大悟了。咱们来调用下上面的错误定义方法：

.shadow1{
    @include box-shadow(0 0 5px rgba(0,0,0,.3));//这个能够运行 } .shadow2{ @include box-shadow(0 0 5px rgba(0,0,0,.3),inset 0 0 3px rgba(255,255,255,.5));//这个不可运行 } 

上面两个代码，咱们先运行第一个，会成功解析出css，而第二个就不行了，它就是孙猴子派来捣乱的。

第一个运行解析成的css为：

.shadow1{ -webkit-box-shadow:0 0 5px rgba(0,0,0,.3); -moz-box-shadow:0 0 5px rgba(0,0,0,.3); box-shadow:0 0 5px rgba(0,0,0,.3); }

为何第二个不行呢，由于第二个咱们给box-shadow设置了两个值，一个外阴影一个内阴影，而且是以，分开的。实际状况是，咱们对box-shadow能够设置不少个值，随咱们高兴，没有必定的。这个时候就有了为css3这些妖孽而生的传递的参数后面加...了，上代码：

//正肯定义方法 @mixin box-shadow($shadow...){ -webkit-box-shadow:$shadow; -moz-box-shadow:$shadow; box-shadow:$shadow; } 

正确的东西得来老是那么不容易，话说一开始研究别人代码的时候，还觉得这...是随便加上去好玩的呢。而后我写css3的@mixin的时候把...通通去掉，结果，结果就悲剧了，能够有多个属性值的，只能设置一个属性值，而后就是满天找bug了。注意这里只在传参的时候变量后面添加...，而在大括号内引用的时候是不用加...，接着你能够回过头测试下上面那两个代码了，保准ok！

看完...这个为css3而生的以后，咱们再看一个为css3而成的东西@content，之因此提起来，是由于它也是应用在@mixin里面的。按常规来讲，咱们全部的样式都是在@mixin里面定义好的，而后使用的时候@include就拷贝了这段样式，可是@content改变了这一惯例，它其实没有定义样式，它是定义好了选择器，而后@include的时候，就是选择器定了，你写的样式都放在这个选择器里面。光文字介绍是不能解决问题的，仍是实例比较有养分：

@mixin header{ #header{ @content; } } 

咱们来简单调用下：

@include header{ width:1000px; height:200px; .logo{ width:200px; } } 

解析后的css：

#header { width: 1000px; height: 200px; } #header .logo { width: 200px; }

看到没，这个选择器以#header为基础，而后@include header里面写的任何样式，都是在这个基础上的。明白@content与上面的其余的区别不，其余的@mixin调用的时候是这样的@include mixin-name($var1,$var2,...,$varn)，而这个@content的调用的时候是这样的@include mixin-name{},大括号里面就是@content表示的内容，里面css样式随便你写啊。

固然上面的@content实例是闲得蛋疼的为简单说明而写的，其实没有什么使用价值的，@content的使用价值其实体如今css3的media-queries，animation的keyframes定义，还有为浏览器兼容的定义。下面实例说明：

//定义media-queries的最小最大宽度 @mixin screen($res-min, $res-max){ @media screen and ( min-width: $res-min ) and ( max-width: $res-max ){ @content; } } //定义animation的keyframes @mixin keyframes($name){ @keyframes #{$name} { @content; } } //定义全部不支持圆角的浏览器使用背景图片 //得使用[modernizr](http://modernizr.com/)来检测，在html上加class @mixin no-border-radius{ .no-border-radius{ @content } } 

又到调用这步了，没办法，不验证下，产生点css，仍是有点迷惑：

#header{ @include screen(780px,1000px){ color:red; } } @include screen(780px,1000px){ body{ font-size:14px; } } @include keyframes(show){ 0% { opacity:0; } 100% { opacity:1; } } //注意下面这两个的区别 @include no-border-radius{ .box{ background:url(round-bg.gif) no-repeat; } } .box{ @include no-border-radius{ background:url(round-bg.gif) no-repeat; } } 

解析后的css：

@media screen and (min-width: 780px) and (max-width: 1000px) { #header { color: red; } } @media screen and (min-width: 780px) and (max-width: 1000px) { body { font-size: 14px; } } @keyframes show { 0% { opacity: 0; } 100% { opacity: 1; } } .no-border-radius .box { background: url(round-bg.gif) no-repeat; } .box .no-border-radius { background: url(round-bg.gif) no-repeat; }

上面那个@include screen咱们使用了两种方法去调用，第一种在选择器里面调用，第二种直接调用，二者生成的css是同样的，既然生成的样式没有什么区别，那如何使用呢？其实第一种方式强调的是以选择器为主，当screen是何时是什么值，而第二种调用方法强调以media-queries条件为主，能够方便组织全部在这个条件中的都写在一块儿。若是作响应式布局咱们建议使用第二种方法，以断点为主来写样式，把某个断点下的样式所有写在一块儿。

为了表示media-queries的特殊，咱们举了个反例，一样以两种方法调用@include no-border-radius，结果能够看到彻底不同啊，你们千万别觉得是@include no-border-radius错了，其实它才是正确的。而media-queries是个为了你们方便使用的特殊案例。

@mixin说到这里，其主要的知识点也说完了，相信你们也收获很多了，为了表示对@mixin的敬意，我再挑几个@mixin来分析。

先来个咱们经常使用的用border生成三角形的@mixin:

// triangle @mixin triangle($direction, $size, $borderColor ) { content:""; height: 0; width: 0; @if $direction == top { border-bottom:$size solid $borderColor; border-left:$size dashed transparent; border-right:$size dashed transparent; } @else if $direction == right { border-left:$size solid $borderColor; border-top:$size dashed transparent; border-bottom:$size dashed transparent; } @else if $direction == bottom { border-top:$size solid $borderColor; border-left:$size dashed transparent; border-right:$size dashed transparent; } @else if $direction == left { border-right:$size solid $borderColor; border-top:$size dashed transparent; border-bottom:$size dashed transparent; } } 

这个@mixin主要有三个变量：第一个是方向的，由于三角形根据箭头朝向有四种方向，咱们对应经常使用的css属性top,right,bottom,left；第二个表示三角形的大小；第三个表示颜色。固然你能够挑你经常使用的那个设置为变量的默认值，那样调用经常使用的那个就比较简单了，直接@include triangle;就ok了。

下面咱们再来个关于css3的神来之笔的@mixin，在说这个以前，先说下前面的那个box-shadow的@mixin，咱们里面的样式是一条一条写的，如-webkit-box-shadow:$shadow;-moz-box-shadow:$shadow;box-shadow:$shadow;，这得多山炮啊，一条一条来，不简洁，不科学。下面欢迎咱们的prefixer这个@mixin，它对css3的前缀定义有画龙点睛之妙。

//是否支持某个浏览器的前缀，若是你不想支持，能够设置为false //---------------------------- $prefix-for-webkit: true !default; $prefix-for-mozilla: true !default; $prefix-for-microsoft: true !default; $prefix-for-opera: true !default; $prefix-for-spec: true !default; // 标准版 // prefixer //---------------------------- @mixin prefixer ($property, $value, $prefixes) { @each $prefix in $prefixes { @if $prefix == webkit and $prefix-for-webkit == true { -webkit-#{$property}: $value; } @else if $prefix == moz and $prefix-for-mozilla == true { -moz-#{$property}: $value; } @else if $prefix == ms and $prefix-for-microsoft == true { -ms-#{$property}: $value; } @else if $prefix == o and $prefix-for-opera == true { -o-#{$property}: $value; } @else if $prefix == spec and $prefix-for-spec == true { #{$property}: $value; } @else { @warn "Unrecognized prefix: #{$prefix}"; } } } 

看到没，判断循环输出啊，到这里也许你仍是不明白的，咱们来调用它来构建css3的一些@mixin，你就明白了。

//webki和标准 @mixin box-shadow($shadow...) { @include prefixer(box-shadow, $shadow, webkit spec); } //webkit moz 和标准 @mixin box-sizing($type:border-box) { // border-box | padding-box | content-box @include prefixer(box-sizing, $type, webkit moz spec); } //webkit moz o 和标准 @mixin transform($property...) { @include prefixer(transform, $property, webkit moz o spec); } 

如今来分析下上面的那个@mixin prefixer，第一个参数$property是属性，第二个参数$value是值，第三个参数$prefixes就是咱们须要添加前缀的组合，由于目前来讲前缀包括webkit,moz,o,ms，因此它就是这些值再加上一个标准spec的随意组合。里面对$prefixes进行循环判断，根据不一样的值，为属性添加不一样的前缀，精彩啊。忽然以为天空一下晴朗多了，爽吧。咱们来调用下：

.box{
    @include box-shadow(0 0 5px rgba(0,0,0,.3)); @include box-sizing; @include transform(scale(2)); } 

解析后的css：

.box { -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transform: scale(2); -moz-transform: scale(2); -o-transform: scale(2); transform: scale(2); }

说完神来之笔，最后咱们再来一段我认为的一个优秀的鸡肋@mixin：

//设置宽高，默认为auto @mixin size($size...) { $size: if(length($size) > 0, $size, auto); $width: nth($size, 1); $height: nth($size, length($size)); @if $width != auto { $width: if(unitless($width), $width + px, $width); } @if $height != auto { $height: if(unitless($height), $height + px, $height); } width: $width; height: $height; } 

先说下这里面涉及到的一些sass知识点：length($var)表示获取变量的长度，nth($var,index)获取变量第几个位置的值，unitless判断是否无单位，而这段if(unitless($width), $width + px, $width)实际上是个三目判断，第一个是条件，第二个是条件为真的时候的值，第三个是条件为假的时候的值，这里面总共用了三个三目判断，哈哈。

其实上面的代码是很优秀的，条理清晰逻辑性很强，并且里面经过判断也有默认值为auto，可是为何是鸡肋呢，缘由很简单：第一，样式就两条太简单，按速度来讲，用emmet写丝毫都不逊色于这个，第二，不能变通为%，组合申明样式。如咱们上面的center-block虽然也很简单，但能够变通为%申明，提供两种调用方式，能够组合申明样式。其实这个@mixin还少了个单独设置width:auto或height:auto。

@mixin该休息下了，后面的%板凳都坐穿了，再不让它上场，它得拂袖而去告老师了。

%

%在这里不是作单位用的，而是做为占位选择器来用的，什么是占位选择器呢，打个比方说，它就是占着茅坑不拉屎，可是若是你要拉屎它立刻就给你让位。这么恶心的咱们就不说了。简单来讲，就是先定义好一段样式，可是这个样式默认是不会解析出来的，等到你经过@extend调用了才会解析在css文件中，避免了生成冗余浪费的css代码。

接上面的那个@mixin center-block，由于它没有参数，而咱们又想要组合申明，那么该%登场了：

%center-block { @include center-block; } 

下面咱们再来给#header,.gallery调用下：

#header{ width:1000px; @extend %center-block; } .gallery{ width:600px; @extend %center-block; } 

解析成的css：

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

实现了咱们刚才说的组合申明的需求，完美！说到这里请把目光都从@mixin转到%来，咱们要趁热打铁，继续深刻%，其实刚才咱们是在@mixin center-block的基础上定义了一个%center-block，并在里面调用@extend center-block，那样其实咱们暴露了两种方式供选择调用，你要组合申明就使用@extend %center-block，你想单独拷贝进你的选择器就用@include center-block。固然你也能够以下这样直接定义%，而不是使用@include来调用一个已经定义好的@mixin，代码以下：

$lte7:true; %clearfix { @if $lte7 { *zoom: 1; } &:before, &:after { content: ""; display: table; font: 0/0 a; } &:after { clear: both; } } 

clearfix你们熟悉吧，之前每次使用都要在咱们的html结构上加个class.clearfix来调用，如今好了，若是哪一个要调用这个，直接@extend：

.wrap{
    @extend %clearfix; } .row{ @extend %clearfix; } 

解析成的css：

.wrap, .row { *zoom: 1; } .wrap:before, .row:before, .wrap:after, .row:after { content: ""; display: table; font: 0/0 a; } .wrap:after, .row:after { clear: both; }

到这里，可能有人就会说你怎么不说下用class定义的样式，也能够用@extend来调用啊。下面说下这两个的区别，上代码：

.fl{ float:left; } %fr{ float:right; }

这段代码咱们去解析下，获得的是以下的css：

.fl { float: left; }

咱们能够看到，class方式申明的.fl原本就是css，确定输出出来了，而%fr一点样式都没有输出。

如今咱们再用@extend来分别调用下：

#main{ @extend .fl; width:700px; } #aside_second{ @extend %fr; width:300px; } 

解析成的css：

.fl, #main { float: left; } #aside_second { float: right; } #main { width: 700px; } #aside_second { width: 300px; }

到这里咱们发现%定义的比用class定义的确实要胜一筹啊，作到了只有调用才产生样式，不调用就是个小乖乖，彻底不添麻烦，不显摆。固然也许还有人会说，那个.fl我能够对应html结构里面的fl这个class。若是你这么说的话，我再给你来段解释：其实写sass的时候，咱们须要一些基础的文件，这些基础文件包括的范围可能比较多，不必定每次都能把全部的用上，可是得有这么一个功能在哪里，我须要就直接调用，而不是每次都根据本身的实际需求去写个基础的东西。这其实跟咱们使用jquery库的道理是同样的，也许你用的其实就是它的选择器功能，而后添加改变些class，或animate个东西，ajax都没用到，可是ajax这个功能就在哪里，你会有须要的时候。你若是用class来定义些@extend的东西，不可能每一个项目均可以用到所有，那样对于这个项目来讲用不到的就是多余的无用代码了，因此从如今开始，把@extend的东西都用%来定义吧。

好，如今问题又来了，那哪些个人html结构上用了.fl这个class的怎么办？这个请在你的具体项目中添加这个class，请看代码：

.fl{
    @extend %fl; } 

哈哈，竟然是直接在具体的项目中调用%就ok了，别气得吐血啊，虽然获得的代码同样，可是这两种是有本质区别的，代码的好坏就在这里了。

固然其实%比class的定义优点不仅是在这里，而是在各类复杂环境中，class的@extend直接会解析出使人发指的疯狂代码哈哈，这也是为何%被创造的缘由之一吧。若是你想了解这个发指的状况，能够打开理解SASS的嵌套，@extend，%Placeholders和Mixins，而后在里面搜索“强大的%placeholders”，而后上面一点就是那些糟糕的使人发指的代码了。

这里有几点须要再次提醒下：

1.  首先%定义的占位选择器样式不能传递参数。固然请注意不能传递参数，不表明样式里面不能使用变量。
2.  而后@extend调用%申明的东西时，必需要把%带上，@extend %clearfix正确，而@extend clearfix是错误的调用。
3.  最后%定义的样式，若是不调用是不会产生任何样式的，这也是用%定义样式比用原先的class方法定义样式高明的一方面。

为了表示这“揭秘”的含量，咱们对第一点补充下，再搞一段代码：

//变量依次为：字体大小，边框颜色，focus时边框颜色，圆角大小 $simpleForm: 12px $gray #52a8ec $baseRadius !default; %simple-form-basic{ border: 1px solid nth($simpleForm,2); padding: 4px; @if not(unitless(nth($simpleForm,4))){ border-radius:nth($simpleForm,4); } &:focus{ outline: 0 none; } } //ie6,7 zoom组合申明 %zoom{ @if $lte7 { *zoom:1; } } //经过先定义@mixin，而后在%调用@mixin来实现传递变量 @mixin float($float:left) { float: $float; @if $lte7 { display: inline; } } %float-right{ @include float(right); } 

第一段代码实际上是sassCore里面为form元素定义的一些border和radius，%simple-form-basic没有传递参数，可是里面的样式照样能够引用外面的变量，说明下里面有个比较有意思的判断，就是当圆角值有单位的时候才会输出border-radius，由于写0的时候咱们是不带单位的，并且写0的时候，除非是覆盖之前的圆角，否则咱们是不想有border-radius:0;这段代码的。第二个就简单了，对于ie6,7加个*zoom:1;，这多好，把*zoom:1;放在一块儿组合申明了。第三段代码其实就是变相的实现传递参数，主要就是先定义一个@mixin，在%里面调用@mixin。

好了，%就这么说完了，简单好用。休息下，活动下胳膊和腿，咱们再来到下一个主题@function。

@function

@function与@mixin，%这二者的第一点不一样在于sass自己就有一些内置的函数，方便咱们调用，如强大的color函数；其次就是它返回的是一个值，而不是一段css样式代码什么的。

sass自己内置函数的地址为：sass functions

先说第一个问题，@function返回一个值和上面的@mixin，%有什么不一样呢？咱们先来用内置的darken函数作个例子：

//若是在scss里直接这样写错误的 darken($f00,50%); 

由于它返回的是一个值，而值只有放在变量或做为属性值，来段正确的：

//做为变量值 $redDark:darken($f00,50%) !default; //做为属性值 p{ color:darken($f00,70%); } 

这下大概能明白吧，做为新手实际上是很容易犯上面的那个错误的。

下面咱们介绍几个经常使用的内置函数，按照官网上面地址上的顺序来。

rgba

分为两种：rgba($red, $green, $blue, $alpha)和rgba($color, $alpha)。

第一种跟css3同样，不介绍，第二种对咱们有点用，实例：

rgba(#102030, 0.5) => rgba(16, 32, 48, 0.5) rgba(blue, 0.2) => rgba(0, 0, 255, 0.2) 

ie-hex-str

ie-hex-str($color)

这个函数将一个颜色格式化成ie滤镜使用，在作css3使用滤镜兼容的时候用得上，实例：

ie-hex-str(#abc) => #FFAABBCC ie-hex-str(#3322BB) => #FF3322BB ie-hex-str(rgba(0, 255, 0, 0.5)) => #8000FF00 

darken

darken($color,$amount)

第一个参数是颜色，第二参数是百分数介于0%-100%，表示将某个颜色变暗多少个百分比。

darken(hsl(25, 100%, 80%), 30%) => hsl(25, 100%, 50%) darken(#800, 20%) => #200 

lighten

lighten($color,$amount)

第一个参数是颜色，第二参数是百分数介于0%-100%，表示将某个颜色变亮多少个百分比。

lighten(hsl(0, 0%, 0%), 30%) => hsl(0, 0, 30) lighten(#800, 20%) => #e00 

percentage

percentage($value)

将一个没有单位的数字转成百分比形式

percentage(0.2) => 20% percentage(100px / 50px) => 200% 

length

length($list)

返回一个列表的长度

length(10px) => 1 length(#514721 #FFF6BF #FFD324) => 3 

nth

nth($list, $n);

返回列表里面第n个位置的值

nth(10px 20px 30px, 1) => 10px nth((Helvetica, Arial, sans-serif), 3) => sans-serif 

unit

unit($number)

获得这个数的单位

unit(100) => "" unit(100px) => "px" unit(3em) => "em" unit(10px * 5em) => "em*px" unit(10px * 5em / 30cm / 1rem) => "em*px/cm*rem" 

unitless

unitless($number)

返回这个数是否没有单位

unitless(100) => true unitless(100px) => false 

三目判断

if($condition, $if-true, $if-false)

第一个表示条件，第二个表示条件为真的值，第三个表示为假的值

if(true, 1px, 2px) => 1px if(false, 1px, 2px) => 2px 

可能上面的都提不起你的兴趣，一时记不住也没有关系，大概有个印象，用的时候知道sass能够提供这个函数功能，或者不清楚再去查下它的官方函数。再次提醒刚开始sass的话，注意函数是返回一个值，不能直接放到sass里面直接去运行的，会报错。你能够把这些用在判断或者属性值里面，那么就是一级棒。

下面咱们来搞点本身定义的函数吧，先来个简单的：

// px转em @function pxToEm($px, $base: 16) { @return ($px / $base) * 1em; } 

调用下：

p{ font-size:pxToEm(20); }

解析后的css：

p { font-size: 1.25em; }

估计这点小罗罗，是上不了大场面的，@mixin都有一个那么神来之笔，@function怎能没有呢，下面介绍网格布局的一个计算宽度的神来之笔，来自blankwork。

//960网格布局 $_columns: 12 !default; // 总列数 $_column-width: 60px !default; // 单列宽 $_gutter: 20px !default; // 间隔 @function get_width($columns:$_columns, $onlyInnerWidth: true, $_subtract:0){ // 默认返回值 $return: ($_column-width + $_gutter) * $columns - $_subtract !default; @if $onlyInnerWidth == true{ //若是$onlyInnerWidth为true，那么减掉一个间隔$_gutter $return: ($_column-width + $_gutter) * $columns - $_gutter - $_subtract; } @return $return; } 

首先，你得对960的网格系统比较熟悉，否则你可能有点迷惑。若是你不了解960网格系统，建议你先在w3cplus里面找找。固然也许你尚未感觉它的神来之笔，别急，先来调用下：

#container{ width:get_width(12,false);//960px } .col-four{ @extend %clearfix; .col{ @include float; margin:0 $_gutter / 2; width:get_width(3); //220px h2{ padding-left:10px width:get_width(3,true,10px); //210px } } } 

看到没，向那些.span1,.span2,..., .span12说88，想要几个格子就传递数字几，固然还有些特别需求，要不了恰好的网格，比喻比4个格子要少30px，看到上面的get_width的第三个参数不，专门负责搞定这些额外需求的，get_width(4,true,30px)获得的就是270px。

因此说这个计算宽度有三种调用形式：第一种默认的如get_width(3)获得220px；第二种不须要左右margin的如get_width(3，false)获得240px；第三种能够灵活缩小点宽度如get_width(3,true,10px)获得210px。

固然计算宽度只是第一步，还有设置column的浮动，而后wrap的闭合子元素的浮动等，都是基于这个函数，一个网格系统就在这个基础上构建成功，它的这个功能应该能够和css3的那个prefixer的@mixin媲美吧。

最后说一下，其实到最后全部的的@mixin，%，@function都是为解析后的css样式服务的，若是你不能带来如下这些优点那么能够考虑不要定义这个东西：

•  化繁为简；
•  样式能够组合申明；
•  浏览器兼容样式判断；
•  灵活实现一些基础经常使用功能的属性值的改变，如颜色，大小等；

sass揭秘的第二篇文章就到此为止。若是你对sass比较感兴趣可是还不会，能够试试咱们的sassGuide教程，若是已经开始使用sass了，欢迎试用sassCore这个库。

顺便说下，本人的面向熟悉sass人员开发的tobe即将上线，欢迎关注，也欢迎到时拍砖。

如需转载，烦请注明出处：http://www.w3cplus.com/preprocessor/sass-mixins-function-placeholder.html