Main Mixins for any project

mixins-master.scss

// These variables are to denote where our breakpoints live.
// They are in EMs and these values came from (Breakpoint / 16) = em value
$four-column-max: 39.9375em;
$eight-column: 40em;
$eight-column-max: 59.9375em;
$twelve-column: 60em;
$twelve-column-max: 79.9375em;
$sixteen-column: 80em;

// The site has some pretty consistent colors, so we'll set those up here
$blue: #0047bb;
$orange: #ff5c39;
$lt-grey: #aaaaaa;
$drk-grey: #3c3c3c;

// This mixin is created for use in stlyesheets to write inline MQs.
// This creates the default min-width, but also to create a window for styles to live ONLY in 8 column or 12 column breakpoints by creating a min and max-width Media Query
@mixin bp($column-size, $only: false) {
	// We are using SASS Maps here, and you will need to have Sass 3.3.x or higher installed
	// Open up Terminal and type sass -v to get your version number
	// The variables below have been defined in the _variables.scss file
	$mins: (
		four-column: -1,
		eight-column: $eight-column,
		twelve-column: $twelve-column,
		sixteen-column: $sixteen-column
	);
	$maxs: (	
		four-column: $four-column-max,
		eight-column: $eight-column-max,
		twelve-column: $twelve-column-max,
		sixteen-column: -1
	);
	
	// Here, we are defining the min and max-width values of the Breakpoint we need.
	$min-width: map-get($mins, $column-size);
	$max-width: if($only == true, map-get($maxs, $column-size), -1);// This is an if/else statement. If true, then define max-width, else set max-width to -1
	
	// Now we need to find out which Media Query we are going to print back to our stylesheet
	@if ($max-width == -1) {
		@media screen and (min-width: $min-width) {
			@content;
		}
	}
	// This is only in here for hte four column, it's the only time min-width would ever be set to -1
	@else if ($min-width == -1) {
		@media screen and (max-width: $max-width) {
			@content;
		}
	}
	@else {
		@media screen and (min-width: $min-width) and (max-width: $max-width) {
			@content;
		}
	}
}

/* Examples:
	@mixin bp(eight-column, true){
		// ONLY 8 column
	}
	@mixin bp(eight-column){
		// 8 column & Up
	}
*/


// Here are some more magical mixins that I pulled from Compass cause I can't live without him
@mixin clearfix {
	overflow: hidden;
}

@mixin pie-clearfix {
	&:after {
		content: "";
		display: table;
		clear: both;
	}
}

// Here are some magical mixins that I made
@mixin sprite-ui($x-offset, $y-offset){
	background: transparent url(../img/sprite-global-ui-assets.png) $x-offset $y-offset no-repeat; 
}