Eps 31: SASS MixIn - Talking HTML 434524

07/03/2017

A mixin allows developers to create reusable CSS blocks. This helps avoiding writing repetitive...

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 ed 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 appeared first on Talking HTML.

Eps 30: SASS Basics - Talking HTML +1 año 19:07 Eps 29: Back to Basics - Talking HTML +1 año 19:39 The Update Episode - Talking HTML +1 año 04:12 CSS Float - Talking HTML +1 año 13:58 Material Design: Expanding Circle - Talking HTML +1 año 18:14 Ver más en APP Comentarios del episodio 3t5i4g