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
   

   View Slide

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

   View Slide

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

   View Slide

4. SASSMEISTER.COM
   

   View Slide

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

   View Slide

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

   View Slide

7. You can nest
   selectors in a mixin.
   

   View Slide

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

   View Slide

9. You can include
   mixins outside of
   rules…
   

   View Slide

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

    View Slide

11. …unless you directly
    define properties or
    parent selectors.
    

    View Slide

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

    View Slide

13. You can include
    other mixins in
    mixins.
    

    View Slide

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;
    }
    

    View Slide

15. You can pass in
    arguments.
    

    View Slide

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);
    }
    

    View Slide

17. You can pass in
    content blocks.
    

    View Slide

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

    View Slide

19. With great power,
    comes great
    responsibility ;-)
    

    View Slide

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

    View Slide

21. SASS-LANG.COM
    

    View Slide

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

    View Slide