# 有用的SASS mixins代码片段

参考：13 Must-have SASS Mixins for Web Designers
Useful Sass (SCSS) mixin Snippets

# 1.尺寸设置

@mixin box($width, $height=$width) {
	width: $width;
	height: $height;
}

使用：

.square {
	@include box(50px);
}
.rectangle {
	@include box(100px, 200px);
}

输出:

.square {
	width: 50px;
	height: 50px;
}
.rectangle {
	width: 100px;
	height: 200px;
}

# 2.清除浮动

@mixin clearfix {
	&:after {
		content: '';
		display: table;	
		clear: both;
	}
}

使用:

.clear {
	@include clearfix;
}

# 3.透明度

@mixin opacity($opacity) {
	opacity: $opacity;
	$opacity-ie: $opacity * 100;
	filter: alpha(opacity = $opacity-ie);  //IE8
}

使用：

.fade {
	@include opacity(.4);
}

输出：

.fade {
	opacity: .4;
	filter: alpha(opacity = 40); //IE8
}

# 4.定位

@mixin position($position, $args) {
	@each $o in top right bottom left {
		$i: index($args, $o);
		@if $i and $i + 1 <= length($args) and type-of(nth($args, $i + 1)) == number {
			#{$o}: nth($args, $i + 1);
		}
	}
	position: $position;
}
@mixin absolute($args: '') {
	@include position(absolute, $args);
}
@mixin fixed($args: '') {
	@include position(fixed, $args);
}
@mixin relative($args: '') {
	@include position(relative, $args);
}

使用：

.menu li {
	@include relative;
}
.sub-menu {
	@include absolute(top 100% left 0);
}
.sticky-bar {
	@include fixed(top 0 left 0);
}

输出：

.menu li {
  position: relative;
}

.sub-menu {
  top: 100%;
  left: 0;
  position: absolute;
}

.sticky-bar {
  top: 0;
  left: 0;
  position: fixed;
}

绝对定位：

@mixin absPosition($top: auto, $right: auto, $bottom: auto, $left: auto) {
	position: absolute;
	top: $top;
	right: $right;
	bottom: $bottom;
	left: $left;
}

# 5.rem布局

@mixin font-size($size: 24, $base: 16) {
	font-size: $size + px;
	font-size: ($size / $base) * 1rem;
}

使用:

body {
	@include font-size(16);
}
p {
	@include font-size(12, 10);
}

输出：

body {
  font-size: 16px;
  font-size: 1rem;
}

p {
  font-size: 12px;
  font-size: 1.2rem;
}

# 6.浏览器前缀

@mixin prefix($property, $value, $vendors: webkit moz ms o, $default: true) {
	@if $vendors {
		@each $vendor in $vendors {
			#{"-" + $vendor + "-" + $property}: #{$value};
		}
	}
	@if $default {
		#{$property} : #{$value};
	}
}

/*or*/

@mixin prefix($property, $value) {
	@each $prefix in -webkit-, -moz-, -ms-, -o-, '', {
		#{$prefix}#{$property}: $value;
	}
}

使用:

html {
	@include prefix('box-sizing', 'border-box', webkit moz ms o);
}
*,
*:before,
*:after {
	@include prefix('box-sizing', 'inherit', webkit moz ms o);
}

输出:

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  -ms-box-sizing: inherit;
  -o-box-sizing: inherit;
  box-sizing: inherit;
}

# 7.media query

@mixin screen($size) {
	$desktop: "(min-width: 1024px)";
	$tablet: "(min-width: 768px) and (max-width: 1023px)";
	$mobile: "(max-width: 767px)";
	@if $size == desktop {
		@media only screen and #{$desktop} {
			@content;
		}
	}
	@else if $size == tablet {
		@media only screen and #{$tablet} {
			@content;
		}
	}
	@else if $size == mobile {
		@media only screen and #{$mobile} {
			@content;
		}
	}
	@else {
		@media only screen and #{$size} {
			@content;
		}
	}
}

使用：

.wrapper {
	margin: 0 auto;
	width: 100%;
	@include screen('tablet') {
		width: 90%;
	}
	@include screen('desktop') {
		width: 85%;
	}
}

输出：

.wrapper {
  margin: 0 auto;
  width: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .wrapper {
    width: 90%;
  }
}
@media only screen and (min-width: 1024px) {
  .wrapper {
    width: 85%;
  }
}

# Retina Images

@mixin retina($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) {
    /* Serving 2x image on Retina display */
    background-image: url($image);
    background-size: $width $height;
  }
}

使用：

.logo {
background-image: url("img/logo.png");
  @include retina("img/logo@2x.png", 100px, 21px);
}

输出：

.logo {
  background-image: url("img/logo.png");
}
@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) {
  .logo {
    /* Serving HQ image on Retina display */
    background-image: url("img/logo@2x.png");
    background-size: 100px 21px;
  }
}

# 9.CSS3 keyframes

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }

  @-moz-keyframes #{$name} {
    @content;
  }

  @keyframes #{$name} {
    @content;
  }
}

使用：

@include keyframes(animate) {
  50% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(-90deg);
  }
}

输出：

@-webkit-keyframes animate {
  50% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(-90deg);
  }
}
@-moz-keyframes animate {
  50% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(-90deg);
  }
}
@keyframes animate {
  50% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(-90deg);
  }
}

# 10.background gradient

@mixin gradient($start-color, $end-color, $orientation)
 {
 background: $start-color;
 @if $orientation == vertical
 {
 // vertical
 background: -moz-linear-gradient(top,  $start-color 0%, $end-color 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$start-color), color-stop(100%,$end-color));
 background: -webkit-linear-gradient(top,  $start-color 0%,$end-color 100%);
 background: -o-linear-gradient(top,  $start-color 0%,$end-color 100%);
 background: -ms-linear-gradient(top,  $start-color 0%,$end-color 100%);
 background: linear-gradient(to bottom,  $start-color 0%,$end-color 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=0 );
 }
 @else if $orientation == horizontal
 {
 // horizontal
 background: -moz-linear-gradient(left,  $start-color 0%, $end-color 100%);
 background: -webkit-gradient(linear, left top, right top, color-stop(0%,$start-color), color-stop(100%,$end-color));
 background: -webkit-linear-gradient(left,  $start-color 0%,$end-color 100%);
 background: -o-linear-gradient(left,  $start-color 0%,$end-color 100%);
 background: -ms-linear-gradient(left,  $start-color 0%,$end-color 100%);
 background: linear-gradient(to right,  $start-color 0%,$end-color 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=1 );
 }
 @else
 {
 // radial
 background: -moz-radial-gradient(center, ellipse cover,  $start-color 0%, $end-color 100%);
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$start-color), color-stop(100%,$end-color));
 background: -webkit-radial-gradient(center, ellipse cover,  $start-color 0%,$end-color 100%);
 background: -o-radial-gradient(center, ellipse cover,  $start-color 0%,$end-color 100%);
 background: -ms-radial-gradient(center, ellipse cover,  $start-color 0%,$end-color 100%);
 background: radial-gradient(ellipse at center,  $start-color 0%,$end-color 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=1 );
 }
 }

使用：

div {
 @include gradient(#ff00ff, #ff00cc, vertical);
}

输出：

div {
  background: #ff00ff;
  background: -moz-linear-gradient(top, #ff00ff 0%, #ff00cc 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff00ff), color-stop(100%, #ff00cc));
  background: -webkit-linear-gradient(top, #ff00ff 0%, #ff00cc 100%);
  background: -o-linear-gradient(top, #ff00ff 0%, #ff00cc 100%);
  background: -ms-linear-gradient(top, #ff00ff 0%, #ff00cc 100%);
  background: linear-gradient(to bottom, #ff00ff 0%, #ff00cc 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="$start-color", endColorstr="$end-color",GradientType=0 );
}

# 11.@font-face

@mixin font-face($font-name, $file-name, $weight: normal, $style: normal) {
  @font-face {
    font-family: quote($font-name);
    src: url($file-name + '.eot');
    src: url($file-name + '.eot?#iefix')  format('embedded-opentype'),
    url($file-name + '.woff') format('woff'),
    url($file-name + '.ttf')  format('truetype'),
    url($file-name + '.svg##{$font-name}')  format('svg');
    font-weight: $weight;
    font-style: $style;
  }
}

使用：

@include font-face("MyFont", "path/to/MyFont", $style: normal, $weight: normal);

输出:

@font-face {
  font-family: "MyFont";
  src: url("path/to/MyFont.eot");
  src: url("path/to/MyFont.eot?#iefix") format("embedded-opentype"), url("path/to/MyFont.woff") format("woff"), url("path/to/MyFont.ttf") format("truetype"), url("path/to/MyFont.svg#MyFont") format("svg");
  font-weight: normal;
  font-style: normal;
}

# 12.块状水平居中

@mixin center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

使用：

.wrapper {
  @include center-block;
}

输出：

.wrapper {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

# 13.垂直居中

@mixin center-vertically {
  position: absolute;
  top: 50%;
  left: 50%;
  @include prefix(transform, translate(-50%, -50%), 'webkit' 'ms');
}

使用：

.vc-box {
  @include center-vertically;
}

输出：

.vc-box {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}