十个有用的Sass Mixins
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更简单些。