A collection of useful SCSS mixins.

mixins.scss

/***********************************************
	Gradients
***********************************************/
@mixin gradient($from, $to) {
  background: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
  background: -moz-linear-gradient(top,  $from, $to);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}');
}

//Usage
div.class { 
	@include gradient(#000, #fff);
}


/***********************************************
	Hover Styles
***********************************************/
@mixin setBgColorAndHover($baseColor) {
  background-color: $baseColor;
  &:hover { 
    background-color: lighten($baseColor, 10%); //lighten,darken; 
    //Add Other Hover Effects Here....
  } 
}

//Usage
div.class { 
	@include setBgColorAndHover(#c90c12);
}


/***********************************************
	Calculate Rem with fallback
***********************************************/
@function calculateRem($size) { 
	$remSize: $size / 16px; 
	@return $remSize * 1rem; 
} 
@mixin font-size($size) { 
	font-size: $size; 
	font-size: calculateRem($size); 
}

//Usage
p { 
	@include font-size(14px); 
}
//Output
p { 
	font-size: 14px; //Will be overridden if browser supports rem 
	font-size: 0.8rem; 
}


/***********************************************
	Media Queries
***********************************************/
@mixin bp-large { 
	@media only screen and (max-width: 60em) { 
		@content; 
	}
} 
@mixin bp-medium { 
	@media only screen and (max-width: 40em) { 
		@content; 
	}
} 
@mixin bp-small { 
	@media only screen and (max-width: 30em) { 
		@content; 
	} 
}

//Usage
.sidebar { 
	width: 60%; 
	float: left; 
	margin: 0 2% 0 0; 
	@include bp-small { 
		width: 100%; 
		float: none; 
		margin: 0; 
	}
}


/***********************************************
	Animations
***********************************************/
@mixin keyframes($animation-name) { 
	@-webkit-keyframes $animation-name { 
		@content; 
	}
	@-moz-keyframes $animation-name { 
		@content; 
	}
	@-ms-keyframes $animation-name { 
		@content; 
	}
	@-o-keyframes $animation-name { 
		@content; 
	}
	@keyframes $animation-name { 
		@content; 
	}
} 
@mixin animation($animation-name) { 
	-webkit-animation: #{$animation-name}; 
	-moz-animation: #{$animation-name}; 
	-ms-animation: #{$animation-name}; 
	-o-animation: #{$animation-name}; 
	animation: #{$animation-name}; 
}

//Usage
@include keyframes(slide-down) { 
  0% { opacity: 1; } 
  90% { opacity: 0; } 
} 
.element { 
	width: 100px; 
	height: 100px; 
	background: black; 
	@include animation('slide-down 5s 3'); 
}


/***********************************************
	Transitions
***********************************************/
@mixin transition($args) { 
	-webkit-transition: $args; 
	-moz-transition: $args; 
	-ms-transition: $args; 
	-o-transition: $args; 
	transition: $args; 
}

//Usage
a { 
	color: gray; 
	@include transition(color .3s ease); 
	&:hover { 
		color: black; 
	} 
}


/***********************************************
	Clearfix
***********************************************/
%clearfix { 
  *zoom: 1; 
  &:before, 
  &:after { 
    content: " "; 
    display: table; 
  }
  &:after { 
    clear: both; 
  }
}

//Usage
.container-with-floated-children { 
  @extend %clearfix; 
}


/*
  *** Center A Fixed Object
  *
  ** @param $width width value defined in px
  ** @param $height height value defined in px
  *
  */
@mixin center_object($width, $height) {
  position: fixed;
  width: $width;
  height: $height;
  top: 50%;
  left: 50%;
  margin-top: -$height/2;
  margin-left: -$width/2;
}

//Use
.box { @include center_object(400px, 100px); }