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')
Contributors
Justin Gillespie (@jgillespie_)
Dan Morgan (@xDanMorgan)
Grant Standridge (@grantstandridge)
Mark Malta (@mark_malta)
Aaron Fischer (@aaronfischer)