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更简单些。
