A mixin allows developers to create reusable CSS blocks. This helps avoiding writing repetitive code. Also allows to make quick changes without searching code for every instance.

@mixin image-rotate {

margin: 20px auto 0 auto;

-moz-transition: all 0.8s ease-in-out;

-webkit-transition: all 0.8s ease-in-out;

-o-transition: all 0.8s ease-in-out;

-ms-transition: all 0.8s ease-in-out;

transition: all 0.8s ease-in-out;

}

@mixin image-rotate-hover {

-moz-transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-o-transform: rotate(360deg);

-ms-transform: rotate(360deg);

transform: rotate(360deg);

}

img#norm {

@include image-rotate;

}

img#norm:hover{

@include image-rotate-hover;

}

Sitepoint example

A mixin can take Sass data values as arguments. These values are specified when you define the mixin and given when you @include the mixin. The arguments are then passed to the mixin as variables. Arguments are included in a comma separated list enclosed in parentheses after the mixin name.

@mixin headline ($color, $size) {

color: $color;

font-size: $size;

}

h1 {

@include headline(green, 12px);

}

h1 {

color: green;

font-size: 12px;

}

h2 {

@include headline(red, 10px);

}

h2 {

color: red;

font-size: 10px;

}

@mixin border-radius($radius) {

-webkit-border-radius: $radius;

-moz-border-radius: $radius;

-ms-border-radius: $radius;

border-radius: $radius;

}

Compiling program & link (Koala)

Where to learn about SASS – http://sass-lang.com/

Codeacademy has a SASS class

@tommnorman

@tnpwdesign

TNPWDesign.com

WebDevPod.com