Eps 31: SASS MixIn – Talking HTML

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 The post Eps 31: SASS MixIn – Talking HTML appeared first on Schaffen Creative.