Eps 31: SASS MixIn – Talking HTML

Play

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