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