Helpful Sass Mixins

A collection of useful plug and play mixins for the Sass Language from the PRPL Dev team.

Just include the file into your project:

@import "sass-mixins";

Examples

Absolute position

@include abs-pos(20px, 30px, auto, auto)

Full page fixed background

@include background-cover('path/to/file.jpg')

Border-box Sizing (More Info: http://bit.ly/10kDnEz)

@include border-box()

Element Shadow

@include box-shadow(5px, 5px, 5px, #000)

Media Query

@include break-min('min-width: 321px'){
	/* Custom CSS Styles */
}

Media Query (Max-Width)

@include break-max(700px){
	/* Custom CSS Styles */
}

Media Query (Min-Width)

@include break-min(700px){
	/* Custom CSS Styles */
}

Clear Floats (More Info: http://bit.ly/evOPw5)

@include clearfix()

REM Font Sizing (More Info: http://bit.ly/IhXzmm)

@include hide-text()

Text Replacement (More Info: http://bit.ly/Asq62d)

@include hide-text()

Retina Images

@include image-2x('path/to/file.jpg', 500px, 500px)

Removes list stylings

@include list-reset()

CSS3 Linear Gradient (with IE support and fallback)

@include linear-gradient(#ffffff, #000000)

Disables Text Selection on Element

@include no-text-select()

Opacity

@include opacity(0)

CSS3 Rounded Corners

@include rounded-corners(10px)

CSS3 Animation Transition

@include transition('background-color 3s linear 1s')

Justin Gillespie (@jgillespie_)
Dan Morgan (@xDanMorgan)
Grant Standridge (@grantstandridge)
Mark Malta (@mark_malta)
Aaron Fischer (@aaronfischer)