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. CSS Output SCSS .thingy { background: #eee; color: #444; }

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

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

    color: #444; } @mixin module { .this { color: #444; } .that { color: #ccc; } } @include module;
  4. CSS Output SCSS Invalid CSS after "...lor: #ccc; }} ":

    expected "{", was "@include module;" @mixin module { color: #444; &.that { color: #ccc; } } @include module;
  5. 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; }
  6. 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); }
  7. CSS Output SCSS * html .thingy1 { display: inline; }

    @mixin ie6-only { * html { @content; } } @include ie6-only { .thingy1 { display: inline; } }
  8. USE SASSMEISTER TO EXPERIMENT WITH MIXINS. BUILD A BASIC MIXIN

    LIBRARY NEXT WEEK: EXTENDING & PLACEHOLDER SELECTORS your homework