自定义mixin

@mixin background-gradient($start-color, $end-color, $orientation) { 
	background: $start-color;

	@if $orientation == 'vertical' {
		background: -webkit-linear-gradient(top, $start-color, $end-color);
		background: linear-gradient(to bottom, $start-color, $end-color);
	} 
	@else if $orientation == 'horizontal' {
		background: -webkit-linear-gradient(left, $start-color, $end-color);
		background: linear-gradient(to right, $start-color, $end-color);
	} 
	@else {
		background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color);
		background: radial-gradient(ellipse at center, $start-color, $end-color);
	}
}

@mixin background-size($width, $height: $width) { 
	@include prefix(background-size, $width $height, 'webkit' 'moz'); 
}

@mixin border-radius($radius...) {
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	-ms-border-radius: $radius;
	border-radius: $radius;
}

@mixin box-shadow($shadow...) {
	-webkit-box-shadow: $shadow;
	-moz-box-shadow: $shadow;
	box-shadow: $shadow;
}

// Rem output with px fallback
@mixin font-size($sizeValue: 1) {
	// font-size: ($sizeValue * 14) * 1px;
	// font-size: $sizeValue * 1rem;
	font-size: 16px;
}

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

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

@mixin center-h($height) { 
	position: absolute;
	top: 50%;
	height: $height;
	margin-top: -($height / 2);
}

// Clearfix
@mixin clearfix() {
	content: "";
	display: table;
}

// Clear after (not all clearfix need this also)
@mixin clearfix-after() {
	clear: both;
}

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

@mixin transition($transition) {
	-moz-transition:    $transition;
	-o-transition:      $transition;
	-webkit-transition: $transition;
	transition:         $transition;
}

@mixin transform($transforms) {
	-moz-transform: $transforms;
	-o-transform: $transforms;
	-ms-transform: $transforms;
	-webkit-transform: $transforms;
	transform: $transforms;
}

@mixin backface-visibility($backfacevisibility) {
	-webkit-backface-visibility: $backfacevisibility;
	-moz-backface-visibility: $backfacevisibility;
	-o-backface-visibility: $backfacevisibility;
	backface-visibility: $backfacevisibility;
}

@mixin rotate ($deg) {
	@include transform(rotate(#{$deg}deg));
}


@mixin transform-origin($x) {
	-webkit-transform-origin: $x;
	-ms-transform-origin: $x;
	transform-origin: $x;
}

@mixin rotate($deg) {
	@include transform(rotate(#{$deg}deg));
}

@mixin rotateY($deg) {
	@include transform(rotateY(#{$deg}deg));
}

@mixin rotateX($deg) {
	@include transform(rotateX(#{$deg}deg));
}

@mixin scale($scale) {
	@include transform(scale($scale));
}

@mixin scaleX($scale) {
	@include transform(scaleX($scale));
}

@mixin scaleY($scale) {
	@include transform(scaleY($scale));
}

@mixin translate($x, $y) {
	@include transform(translate($x, $y));
}

@mixin translateY($y) {
	@include transform(translateY($y));
}

@mixin translateX($x) {
	@include transform(translateX($x));
}

@mixin skew($x, $y) {
	@include transform(skew(#{$x}deg, #{$y}deg));
}

@mixin position($type, $left: null, $right: null, $top: null, $bottom: null) { 
	position: $type;
	top: $top;
	right: $right;
	bottom: $bottom;
	left: $left;
}

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


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

@mixin perspective($value) {
	-webkit-perspective: $value;
	-moz-perspective: $value;
	-o-perspective: $value;
	perspective: $value;
}

@mixin grayscale($value) {
	-webkit-filter: #{"grayscale(#{$value})"};
	-moz-filter: #{"grayscale(#{$value})"};
	filter:#{"grayscale(#{$value})"};
}

@mixin auto-numbers($numbered-element, $sep, $counter: item, $nested-parent: false ){
	$sel: ();
	@if $nested-parent {
		$sel: append($sel, unquote($nested-parent));

		#{$nested-parent}{
			list-style: none;
			margin-left: 0;
		}
	}
	$sel: append($sel, unquote('&'), comma);

	#{$sel}{
		counter-reset: #{$counter};
		> #{$numbered-element}{
			&:before{
				counter-increment: #{$counter};
				content: if($nested-parent, counters(#{$counter}, "#{$sep} ") "#{$sep} ", counter(#{$counter}) "#{$sep} ") ;
			}
		}
	}
}