sass中mixin常用的CSS3

圆角border-radius

 @mixin rounded($radius){
     -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
     border-radius: $radius;
 }

盒模型阴影box-shadow

下面是一个使用多参数的例子：用CSS3创建一个阴影的mixin，需要传递水平和垂的偏移量，模糊的范围，还有颜色，4个参数：

 @mixin shadow($x, $y, $blur, $color){
     -webkit-box-shadow: $x $y $blur $color;
        -moz-box-shadow: $x $y $blur $color;
             box-shadow: $x $y $blur $color;
 }

我们把这个mixin添加到之前的div.module的例子中，让这个阴影以垂直向下1px，2px的模糊范围，颜色为50%透明度的黑色呈现：

 div.module{
     padding: 20px;
     background: #eee;
     @include rounded(10px);
     @include shadow(0, 1px, 2px, rgba(0,0,0,.5));
 }

CSS3渐变的语法让人非常厌烦。在各浏览器中的写法都不一样，不容易记忆，并且书写规范进化的进程非常快，强迫作者要不断更新他们的样式表。基于以上原因，Sass（特别是mixin）利用CSS3渐变做了一个可随时更新的小功能。当规范变更时，我们只需要在mixin中更新一次语法规范即可。为了保证渐变在大多数浏览器中可以显示，而且在不支持渐变的浏览器中显示纯色，我们需要全面的属性堆栈

 header nav[role="navigation"] ul li.active a {
     padding: 3px 8px;
     color: #fff;
     -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
             border-radius: 4px;
     /* Fallback for sad browsers */
     background-color: #d42a78;
     /* Mozilla Firefox */
     background-image: -moz-linear-gradient(#ff70b1, #d42a78);
     /* Opera */
     background-image: -o-linear-gradient(#ff70b1, #d42a78);
     /* WebKit (Safari/Chrome 10) */
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff70b1), color-stop(1, #d42a78));
     /* WebKit (Chrome 11+) */
     background-image: -webkit-linear-gradient(#ff70b1, #d42a78);
     /* IE10 */
     background-image: -ms-linear-gradient(#ff70b1, #d42a78);
     /* W3C */
     background-image: linear-gradient(#ff70b1, #d42a78);
 }

每一个创建由上到下渐变的私有前缀属性，都有相同的从开始的十六进制色值到结束的十六进制色值。用Sass的mixin，我们可以通过传递渐变颜色的变量给mixin来很简单的调用这些。谁能每次写渐变的时候都记得这些样式规则啊？下面做一些改变让我们更轻松一点吧。首先我们建一个叫linear-gradient的mixin，在整个样式中把十六进制的色值提取出来，通过$from和$to两个变量将色值传递到样式代码中：

 @mixin linear-gradient($from, $to) {
     /* Fallback for sad browsers */
     background-color: $to;
     /* Mozilla Firefox */
     background-image:-moz-linear-gradient($from, $to);
     /* Opera */
     background-image:-o-linear-gradient($from, $to);
     /* WebKit (Safari 4+, Chrome 1+) */
     background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, $from), color-stop(1, $to));
     /* WebKit (Chrome 11+) */
     background-image: -webkit-linear-gradient($from, $to);
     /* IE10 */
     background-image: -ms-linear-gradient($from, $to);
     /* W3C */
     background-image: linear-gradient($from, $to);
 }

注意，我使用了变量$to的颜色来指定当浏览器不支持CSS渐变样式时，background-color的背景颜色。非常感谢我们只用写这么折磨人的样式一次。现在，当我们想要创建一个简单的渐变的时候，我们就可以选择两个颜色传给mixin，剩下的Sass就帮我们做了。

 &.active a{
     padding: 3px 8px;
     color: #fff;
     @include rounded(4px);
     @include linear-gradient(#ff70b1, #d42a78);
 }

创建一个mixin库

 @mixin rounded($radius) {
     -webkit-border-radius: $radius;
        -moz-border-radius: $radius;
             border-radius: $radius;
 }
 @mixin shadow($x, $y, $blur, $color) {
   -webkit-box-shadow: $x $y $blur $color;
      -moz-box-shadow: $x $y $blur $color;
           box-shadow: $x $y $blur $color;
 }
 @mixin shadow-inset($x, $y, $blur, $color) {
     -webkit-box-shadow: inset $x $y $blur $color;
        -moz-box-shadow: inset $x $y $blur $color;
             box-shadow: inset $x $y $blur $color;
 }
 @mixin transition($property) {
     -webkit-transition: $property .2s ease;
        -moz-transition: $property .2s ease;
          -o-transition: $property .2s ease;
             transition: $property .2s ease;
 }
 @mixin box-sizing {
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
 }
 @mixin linear-gradient($from, $to) {
     /* Fallback for sad browsers */
     background-color: $to;
     /* Mozilla Firefox */
     background-image:-moz-linear-gradient($from, $to);
     /* Opera */
     background-image:-o-linear-gradient($from, $to);
     /* WebKit (Chrome 11+) */
     background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, $from), color-stop(1, $to));
     /* WebKit (Safari 5.1+, Chrome 10+) */
     background-image: -webkit-linear-gradient($from, $to);
     /* IE10 */
     background-image: -ms-linear-gradient($from, $to);
     /* W3C */
     background-image: linear-gradient($from, $to);
 }