sass是世界上最成熟、最稳定、强大而又专业的css预处理器。我使用sass有相当长的一段时间了。发现sass的mixins对于任何前端开发人员都非常有用，可以帮助前端开发人员节省很多时间，而且能更好的利用。
sass的mixins可以让你声明任何可重用的css代码块。你甚至可以通过传值，使用你的mixins更佳灵活。它让前端开发人员节省了大量的时间，确保前端人员写出来的代码不会冗余而且便于组织和管理代码。
我推荐使用compass,因为他创建了很多有用的mixins，简化了前端开发人员的很多工作。
1、浏览器前缀 来源于：useful sass (scss) mixin snippets
scss: @mixin css3($property, $value) { @each $prefix in -webkit-, -moz-, -ms-, -o-, '' { #{$prefix}#{$property}: $value; }}
使用： .border_radius { @include css3(transition, 0.5s);}
css: .border_radius { -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s;}
2、响应式断点 来源于：handy sass mixins
scss: @mixin breakpoint($point) { @if $point == large { @media (min-width: 64.375em) { @content; } } @else if $point == medium { @media (min-width: 50em) { @content; } } @else if $point == small { @media (min-width: 37.5em) { @content; } }}
使用： .page-wrap { width: 75%; @include breakpoint(large) { width: 60%; } @include breakpoint(medium) { width: 80%; } @include breakpoint(small) { width: 95%; }}
css: .page-wrap { width: 75%;}@media (min-width: 64.375em) { .page-wrap { width: 60%; }}@media (min-width: 50em) { .page-wrap { width: 80%; }}@media (min-width: 37.5em) { .page-wrap { width: 95%; }}
3、retina图片 来源于：easy retina-ready images using scss
scss @mixin image-2x($image, $width, $height) { @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { /* on retina, use image that's scaled by 2 */ background-image: url($image); background-size: $width $height; }}
使用： div.logo { background: url(logo.png) no-repeat; @include image-2x(logo2x.png, 100px, 25px);}
css: div.logo { background: url(logo.png) no-repeat;}@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { div.logo { /* on retina, use image that's scaled by 2 */ background-image: url(logo2x.png); background-size: 100px 25px; }}
4、清除浮动 来源：a new micro clearfix hack
scss: @mixin clearfix() { &:before, &:after { content: ; display: table; } &:after { clear: both; }}
使用： .article { @include clearfix();}
css: .article:before, .article:after { content: ; display: table;}.article:after { clear: both;}
5、black和white 来源：useful sass mixins
scss: @function black($opacity){ @return rgba(0,0,0,$opacity)}@function white($opacity){ @return rgba(255,255,255,$opacity)}
特别声明，上面这个不属于sass的mixins范畴，是sass的自定义函数功能。
使用： .my-class{ background:black(0.15); color:white(0.9);}
css: .my-class { background: rgba(0, 0, 0, 0.15); color: rgba(255, 255, 255, 0.9);}
6、内阴影和外阴影 来源：useful sass mixins
scss: @mixin box-emboss($opacity, $opacity2){ box-shadow:white($opacity) 0 1px 0, inset black($opacity2) 0 1px 0;}
使用: .box{ @include box-emboss(0.8, 0.05);}
css: .box { box-shadow: white(0.8) 0 1px 0, inset black(0.05) 0 1px 0;}
7、透明度 来源：handy sass mixins
scss: @mixin opacity($opacity) { opacity: $opacity; $opacity-ie: $opacity * 100; filter: alpha(opacity=$opacity-ie); //ie8}
使用： .article-heading { @include opacity(0.8);}
css: .article-heading { opacity: 0.8; filter: alpha(opacity=80);}
8、绝对定位 来源：handy sass mixins
scss: @mixin abs-pos ($top: auto, $right: auto, $bottom: auto, $left: auto) { top: $top; right: $right; bottom: $bottom; left: $left; position: absolute;}
使用： .abs { @include abs-pos(10px, 10px, 5px, 15px);}
css: .abs { top: 10px; right: 10px; bottom: 5px; left: 15px; position: absolute;}
9、行高 来源：handy sass mixins
scss: @mixin line-height($heightvalue: 12 ){ line-height: $heightvalue + px; //fallback for old browsers line-height: (0.125 * $heightvalue) + rem;}
使用： body { @include line-height (16);}
css: body { line-height: 16px; line-height: 2rem;}
10、图片标题动画 来源：4 useful sass mixins
scss: @mixin animated-caption($font-color, $bg-color, $bg-opacity, $padding, $transition-speed) { display:inline-block; position:relative; overflow:hidden; & img { display:block; width:100%; height:auto; } & span.outer { display:block; width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding:$padding; color:$font-color; position:absolute; bottom:-100px; -webkit-transition: bottom $transition-speed ease; -moz-transition: bottom $transition-speed ease; -o-transition: bottom $transition-speed ease; -ms-transition: bottom $transition-speed ease; transition: bottom $transition-speed ease; & span.inner{ margin:0px; position:relative; } &:before{ content: ; display:block; position:absolute; z-index:0; left:0px; top:0px; width:100%; height:100%; background:$bg-color; filter: alpha(opactiy=($bg-opacity * 100)); -ms-filter: progid:dximagetransform.microsoft.alpha(opacity=#{$bg-opacity * 100}); -moz-opacity: $bg-opacity; -khtml-opacity: $bg-opacity; opacity: $bg-opacity; } } &:hover span.outer{ bottom:0px; }}
使用： a{ @include animated-caption(#ffffff, #333333, 0.75, 10px, 0.5s)}
css: a { display: inline-block; position: relative; overflow: hidden;}a img { display: block; width: 100%; height: auto;}a span.outer { display: block; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; color: #ffffff; position: absolute; bottom: -100px; -webkit-transition: bottom 0.5s ease; -moz-transition: bottom 0.5s ease; -o-transition: bottom 0.5s ease; -ms-transition: bottom 0.5s ease; transition: bottom 0.5s ease;}a span.outer span.inner { margin: 0px; position: relative;}a span.outer:before { content: ; display: block; position: absolute; z-index: 0; left: 0px; top: 0px; width: 100%; height: 100%; background: #333333; filter: alpha(opactiy=75); -ms-filter: progid:dximagetransform.microsoft.alpha(opacity=75); -moz-opacity: 0.75; -khtml-opacity: 0.75; opacity: 0.75;}a:hover span.outer { bottom: 0px;}
注：这个mixins如果在实际项目中，可以配合其它的mixins更简单些。