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 – Codeacademy has a SASS class @tommnorman @tnpwdesign TNPWDesign.com WebDevPod.com The post Eps 31: SASS MixIn – Talking HTML appeared first on Schaffen Creative .

You can listen to Eps 31: SASS MixIn – Talking HTML online on Radio and Podcast. Open the player on this page to stream the available audio.

Eps 31: SASS MixIn – Talking HTML is an episode from Talking HTML by Tom Norman.

This episode is 22:42 long.

This episode was published on Mar 6, 2017.

Yes. Use the heart button on the episode page to add it to your favorite episodes list.

Yes. This page shows related episodes from Talking HTML when more episodes are available from the podcast feed.