sass中mixin經常使用的CSS3

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