Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sass Basics #2

jina
April 22, 2014

Sass Basics #2

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

jina

April 22, 2014
Tweet

More Decks by jina

Other Decks in Design

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