A beginner-level presentation I gave internally at work to teach the basics of Sass.
JINA BOLTONSENIOR PRODUCT DESIGNERSALESFORCE UXSass Basics #2
View Slide
…PREVIOUSLY INSass Basics #1INTRODUCTION TO SASSCOMMENTINGNESTINGVARIABLES
Sass Basics #2INTRODUCTION TO MIXINSPASSING ARGUMENTSCONTENT BLOCKSMIXIN LIBRARIES
SASSMEISTER.COM
CSS OutputSCSS.thingy {background: #eee;color: #444;}@mixin module {background: #eee;color: #444;}.thingy {@include module;}
SassSCSS=modulebackground: #eeecolor: #444@mixin module {background: #eee;color: #444;}
You can nestselectors in a mixin.
CSS OutputSCSS.thingy {background: #eee;}.thingy .this {color: #444;}@mixin module {background: #eee;.this {color: #444;}}.thingy {@include module;}
You can includemixins outside ofrules…
CSS OutputSCSS.this {color: #444;}.that {color: #444;}@mixin module {.this {color: #444;}.that {color: #ccc;}}@include module;
…unless you directlydefine properties orparent selectors.
CSS OutputSCSSInvalid CSS after"...lor:#ccc; }} ":expected "{", was"@include module;"@mixin module {color: #444;&.that {color: #ccc;}}@include module;
You can includeother mixins inmixins.
CSS OutputSCSS.thingy {background: #222;color: #ccc;}.thingy a {color: #fff;}@mixin dark-theme {background: #222;color: #ccc;}@mixin module {@include dark-theme;a { color: #fff; }}.thingy {@include module;}
You can pass inarguments.
CSS OutputSCSS.thingy1 {background: #eee;color: #444;}.thingy2 {background: #eee;color: purple;}.thingy3 {background: green;color: red;}.thingy4 {background: blue;color: #444;}@mixin module($text: #444,$background: #eee) {background: $background;color: $text;}.thingy1 { @include module; }.thingy2 { @include module(purple); }.thingy3 {@include module(red, green);}.thingy4 {@include module($background: blue);}
You can pass incontent blocks.
CSS OutputSCSS* html .thingy1 {display: inline;}@mixin ie6-only {* html {@content;}}@include ie6-only {.thingy1 {display: inline;}}
With great power,comes greatresponsibility ;-)
Every time you usea Mixin, you outputthat code again.
SASS-LANG.COM
USE SASSMEISTER TO EXPERIMENT WITH MIXINS.BUILD A BASIC MIXIN LIBRARYNEXT WEEK: EXTENDING & PLACEHOLDER SELECTORSyour homework