JINA BOLTON SENIOR PRODUCT DESIGNER SALESFORCE UX Sass Basics #2

…PREVIOUSLY IN Sass Basics #1 INTRODUCTION TO SASS COMMENTING NESTING VARIABLES

Sass Basics #2 INTRODUCTION TO MIXINS PASSING ARGUMENTS CONTENT BLOCKS MIXIN LIBRARIES

SASSMEISTER.COM

CSS Output SCSS .thingy { background: #eee; color: #444; } @mixin module { background: #eee; color: #444; } .thingy { @include module; }

Sass SCSS =module background: #eee color: #444 @mixin module { background: #eee; color: #444; }

You can nest selectors in a mixin.

CSS Output SCSS .thingy { background: #eee; } .thingy .this { color: #444; } @mixin module { background: #eee; .this { color: #444; } } .thingy { @include module; }

You can include mixins outside of rules…

CSS Output SCSS .this { color: #444; } .that { color: #444; } @mixin module { .this { color: #444; } .that { color: #ccc; } } @include module;

…unless you directly define properties or parent selectors.

CSS Output SCSS Invalid CSS after "...lor: #ccc; }} ": expected "{", was "@include module;" @mixin module { color: #444; &.that { color: #ccc; } } @include module;

You can include other mixins in mixins.

CSS Output SCSS .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 in arguments.

CSS Output SCSS .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 in content blocks.

CSS Output SCSS * html .thingy1 { display: inline; } @mixin ie6-only { * html { @content; } } @include ie6-only { .thingy1 { display: inline; } }

With great power, comes great responsibility ;-)

Every time you use a Mixin, you output that code again.

SASS-LANG.COM

USE SASSMEISTER TO EXPERIMENT WITH MIXINS. BUILD A BASIC MIXIN LIBRARY NEXT WEEK: EXTENDING & PLACEHOLDER SELECTORS your homework