sass中mixin常用的CSS3

浏览数：22 / 时间：2015年06月09日

圆角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 }