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

Untangle your stylesheets with Sass

Roy Tomeij
October 15, 2012

Untangle your stylesheets with Sass

As presented at FOWA London, FOWA Prague, Kings of Code and CodeConnexx.

Roy Tomeij

October 15, 2012
Tweet

More Decks by Roy Tomeij

Other Decks in Programming

Transcript

  1. nested rules .foo { width: 100%; a { color: #fff;

    } } .foo { width: 100%; } .foo a { color: #fff; } Sass CSS
  2. parent reference .foo { color: #000; &:hover { color: #fff;

    } } .foo { color: #000; } .foo:hover { color: #fff; } Sass CSS
  3. mixins @mixin hide-text { text-indent: -999px; overflow: hidden; } .foo

    { width: 100%; @include hide-text; } .foo { width: 100%; text-indent: -999px; overflow: hidden; } Sass CSS
  4. selector inheritance .error { color: red; } .bad-error { @extend

    .error; font-weight: bold; } .error, .bad-error { color: red; } .bad-error { font-weight: bold; } CSS Sass
  5. data types $number: 1; $string: "Some string"; $color: blue; $color:

    rgba(#f0f, 0.5); // Sass gets this! $boolean: true; $list: facebook, twitter, youtube;
  6. operations $column: 10px; .foo { width: 10px + 2px; width:

    2in + 8pt; width: $column / 2; } .foo { width: 12px; width: 2.11111in; width: 5px; } CSS Sass
  7. control directives $network: linkedin; .foo { @if $network == twitter

    { background: blue; } @else if $network == youtube { background: red; } @else { background: magenta; } } Sass
  8. control directives .icon-twitter { background: url('twitter.png'); } .icon-facebook { background:

    url('facebook.png'); } .icon-youtube { background: url('youtube.png'); } CSS
  9. media queries h1 { width: 500px; @media (…) { width:

    400px; } } h1 { width: 500px; } @media (…) { h1 { width: 400px; } } CSS Sass
  10. placeholder selector %error { color: red; } .bad-error { @extend

    %error; font-weight: bold; } .bad-error { color: red; } .bad-error { font-weight: bold; } CSS Sass
  11. @content directive @mixin ie6 { * html { @content; }

    } @include ie6 { .foo { color: red; } } * html .foo { color: red; } CSS Sass
  12. retina mixin @mixin retina { @media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2),

    (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) { @content; } } Sass
  13. breakpoint media queries @mixin respond-to($device) { @if $device == tablet-portrait

    { @media (max-width: 768px) { @content; } } @else if ($device == phone-portrait) { @media (max-width: 320px) { @content; } } } Sass
  14. breakpoint media queries h1 { width: 600px; @include respond-to(tablet-portrait) {

    width: 100%; } @include respond-to(phone-portrait) { width: 200px; } } Sass
  15. variable arguments @mixin foo($args...) { // $args is now a

    list! } h1 { @include foo(#000, #fff, #ddd); } Sass