Sass Basics #2

A beginner-level presentation I gave internally at work to teach the basics of Sass.

Transcript

1. JINA BOLTON SENIOR PRODUCT DESIGNER SALESFORCE UX Sass Basics #2
2. …PREVIOUSLY IN Sass Basics #1 INTRODUCTION TO SASS COMMENTING NESTING VARIABLES
3. Sass Basics #2 INTRODUCTION TO MIXINS PASSING ARGUMENTS CONTENT BLOCKS MIXIN LIBRARIES
4. SASSMEISTER.COM
5. CSS Output SCSS .thingy { background: #eee; color: #444; } @mixin module { background: #eee; color: #444; } .thingy { @include module; }
6. Sass SCSS =module background: #eee color: #444 @mixin module { background: #eee; color: #444; }
7. You can nest selectors in a mixin.
8. CSS Output SCSS .thingy { background: #eee; } .thingy .this { color: #444; } @mixin module { background: #eee; .this { color: #444; } } .thingy { @include module; }
9. You can include mixins outside of rules…
10. CSS Output SCSS .this { color: #444; } .that { color: #444; } @mixin module { .this { color: #444; } .that { color: #ccc; } } @include module;
11. …unless you directly define properties or parent selectors.
12. CSS Output SCSS Invalid CSS after "...lor: #ccc; }} ": expected "{", was "@include module;" @mixin module { color: #444; &.that { color: #ccc; } } @include module;
13. You can include other mixins in mixins.
14. 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; }
15. You can pass in arguments.
16. 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); }
17. You can pass in content blocks.
18. CSS Output SCSS * html .thingy1 { display: inline; } @mixin ie6-only { * html { @content; } } @include ie6-only { .thingy1 { display: inline; } }
19. With great power, comes great responsibility ;-)
20. Every time you use a Mixin, you output that code again.
21. SASS-LANG.COM
22. USE SASSMEISTER TO EXPERIMENT WITH MIXINS. BUILD A BASIC MIXIN LIBRARY NEXT WEEK: EXTENDING & PLACEHOLDER SELECTORS your homework