My Photoshop Classroom

I’ve been using Sass in my front-end development for more than a year, and mixins were the feature I latched onto right away. I saw an instant reduction in the time I spent writing stylesheets, no matter how large or small the project. But what are mixins? From the Sass Language website:

Mixins are one of the most powerful Sass features. They allow re-use of styles—properties or even selectors—without having to copy and paste them or move them into a non-semantic class.

Put another way, mixins are code generators. You create a mixin in your Sass stylesheet with the @mixin directive, define the CSS rules it should output and call it anytime you need those rules included in a style declaration. I use mixins exclusively for CSS3 features like box-shadows, text-shadows, and border-radiuses. Many of these features are not fully supported, and require a vendor prefix like -webkit-, -moz-, -ms-, -o- to work as expected. Instead of writing five rules each time I want to use a CSS3 feature, I can call a one-line mixin and have it generate proper CSS for me.

Source : http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/stir-up-your-own-delicious-sass-mixins/