圆角border-radius
1 @mixin rounded($radius){ 2 -webkit-border-radius: $radius; 3 -moz-border-radius: $radius; 4 border-radius: $radius; 5 }
盒模型阴影box-shadow
下面是一个使用多参数的例子：用CSS3创建一个阴影的mixin，需要传递水平和垂的偏移量，模糊的范围，还有颜色，4个参数：
1 @mixin shadow($x, $y, $blur, $color){ 2 -webkit-box-shadow: $x $y $blur $color; 3 -moz-box-shadow: $x $y $blur $color; 4 box-shadow: $x $y $blur $color; 5 }
我们把这个mixin添加到之前的div.module的例子中，让这个阴影以垂直向下1px，2px的模糊范围，颜色为50%透明度的黑色呈现：
1 div.module{ 2 padding: 20px; 3 background: #eee; 4 @include rounded(10px); 5 @include shadow(0, 1px, 2px, rgba(0,0,0,.5)); 6 }
CSS3渐变的语法让人非常厌烦。在各浏览器中的写法都不一样，不容易记忆，并且书写规范进化的进程非常快，强迫作者要不断更新他们的样式表。基于以上原因，Sass（特别是mixin）利用CSS3渐变做了一个可随时更新的小功能。当规范变更时，我们只需要在mixin中更新一次语法规范即可。为了保证渐变在大多数浏览器中可以显示，而且在不支持渐变的浏览器中显示纯色，我们需要全面的属性堆栈
1 header nav[role="navigation"] ul li.active a { 2 padding: 3px 8px; 3 color: #fff; 4 -webkit-border-radius: 4px; 5 -moz-border-radius: 4px; 6 border-radius: 4px; 7 /* Fallback for sad browsers */ 8 background-color: #d42a78; 9 /* Mozilla Firefox */ 10 background-image: -moz-linear-gradient(#ff70b1, #d42a78); 11 /* Opera */ 12 background-image: -o-linear-gradient(#ff70b1, #d42a78); 13 /* WebKit (Safari/Chrome 10) */ 14 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff70b1), color-stop(1, #d42a78)); 15 /* WebKit (Chrome 11+) */ 16 background-image: -webkit-linear-gradient(#ff70b1, #d42a78); 17 /* IE10 */ 18 background-image: -ms-linear-gradient(#ff70b1, #d42a78); 19 /* W3C */ 20 background-image: linear-gradient(#ff70b1, #d42a78); 21 }
每一个创建由上到下渐变的私有前缀属性，都有相同的从开始的十六进制色值到结束的十六进制色值。用Sass的mixin，我们可以通过传递渐变颜色的变量给mixin来很简单的调用这些。谁能每次写渐变的时候都记得这些样式规则啊？下面做一些改变让我们更轻松一点吧。首先我们建一个叫linear-gradient的mixin，在整个样式中把十六进制的色值提取出来，通过$from和$to两个变量将色值传递到样式代码中：
1 @mixin linear-gradient($from, $to) { 2 /* Fallback for sad browsers */ 3 background-color: $to; 4 /* Mozilla Firefox */ 5 background-image:-moz-linear-gradient($from, $to); 6 /* Opera */ 7 background-image:-o-linear-gradient($from, $to); 8 /* WebKit (Safari 4+, Chrome 1+) */ 9 background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, $from), color-stop(1, $to)); 10 /* WebKit (Chrome 11+) */ 11 background-image: -webkit-linear-gradient($from, $to); 12 /* IE10 */ 13 background-image: -ms-linear-gradient($from, $to); 14 /* W3C */ 15 background-image: linear-gradient($from, $to); 16 }
注意，我使用了变量$to的颜色来指定当浏览器不支持CSS渐变样式时，background-color的背景颜色。非常感谢我们只用写这么折磨人的样式一次。现在，当我们想要创建一个简单的渐变的时候，我们就可以选择两个颜色传给mixin，剩下的Sass就帮我们做了。
1 &.active a{ 2 padding: 3px 8px; 3 color: #fff; 4 @include rounded(4px); 5 @include linear-gradient(#ff70b1, #d42a78); 6 }
创建一个mixin库
1 @mixin rounded($radius) { 2 -webkit-border-radius: $radius; 3 -moz-border-radius: $radius; 4 border-radius: $radius; 5 } 6 @mixin shadow($x, $y, $blur, $color) { 7 -webkit-box-shadow: $x $y $blur $color; 8 -moz-box-shadow: $x $y $blur $color; 9 box-shadow: $x $y $blur $color; 10 } 11 @mixin shadow-inset($x, $y, $blur, $color) { 12 -webkit-box-shadow: inset $x $y $blur $color; 13 -moz-box-shadow: inset $x $y $blur $color; 14 box-shadow: inset $x $y $blur $color; 15 } 16 @mixin transition($property) { 17 -webkit-transition: $property .2s ease; 18 -moz-transition: $property .2s ease; 19 -o-transition: $property .2s ease; 20 transition: $property .2s ease; 21 } 22 @mixin box-sizing { 23 -webkit-box-sizing: border-box; 24 -moz-box-sizing: border-box; 25 box-sizing: border-box; 26 } 27 @mixin linear-gradient($from, $to) { 28 /* Fallback for sad browsers */ 29 background-color: $to; 30 /* Mozilla Firefox */ 31 background-image:-moz-linear-gradient($from, $to); 32 /* Opera */ 33 background-image:-o-linear-gradient($from, $to); 34 /* WebKit (Chrome 11+) */ 35 background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, $from), color-stop(1, $to)); 36 /* WebKit (Safari 5.1+, Chrome 10+) */ 37 background-image: -webkit-linear-gradient($from, $to); 38 /* IE10 */ 39 background-image: -ms-linear-gradient($from, $to); 40 /* W3C */ 41 background-image: linear-gradient($from, $to); 42 }