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. Untangle your stylesheets untangle your stylesheets Roy Tomeij / @roy,

    80beans
  2. writing CSS isn’t fun

  3. None
  4. today’s lesson

  5. back to basics

  6. it’s just CSS

  7. two syntaxes: SCSS & Sass .scss { width: 100%; }

    .sass width: 100% SCSS Sass
  8. variables $full-width: 100%; .foo { width: $full-width; } .foo {

    width: 100%; } Sass CSS
  9. nested rules .foo { width: 100%; a { color: #fff;

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

    } } .foo { color: #000; } .foo:hover { color: #fff; } Sass CSS
  11. 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
  12. selector inheritance .error { color: red; } .bad-error { @extend

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

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

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

    { background: blue; } @else if $network == youtube { background: red; } @else { background: magenta; } } Sass
  17. control directives .foo { background: magenta; } CSS

  18. control directives @each $network in twitter, facebook, youtube { .icon-#{$network}

    { background: url("#{$network}.png"); } } Sass
  19. control directives .icon-twitter { background: url('twitter.png'); } .icon-facebook { background:

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

    400px; } } h1 { width: 500px; } @media (…) { h1 { width: 400px; } } CSS Sass
  21. shiny new features

  22. placeholder selector %error { color: red; } .bad-error { @extend

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

    } @include ie6 { .foo { color: red; } } * html .foo { color: red; } CSS Sass
  24. let’s get creative

  25. 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
  26. retina mixin h1 { background: url("image.png"); @include retina { background:

    url("[email protected]"); } } Sass
  27. retina mixin h1 { background: url('image.png'); } @media (min--moz-device-pixel-ratio: 1.5),

    … { h1 { background: url('[email protected]'); } } CSS
  28. making stuff fit

  29. 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
  30. breakpoint media queries h1 { width: 600px; @include respond-to(tablet-portrait) {

    width: 100%; } @include respond-to(phone-portrait) { width: 200px; } } Sass
  31. breakpoint media queries h1 { width: 600px; } @media (max-width:

    768px) { h1 { width: 100%; } } … CSS
  32. inline images .facebook { background: inline-image("facebook.png"); } .facebook { background:

    url('data:image/png;base64,…'); } CSS Sass + Compass
  33. inline images %facebook { background: inline-image("facebook.png"); } … CSS Sass

    + Compass
  34. things you may not know

  35. !comments /* Nothing... */ /*! Copyright 2012 */ /* Copyright

    2012 */ CSS Sass
  36. variable arguments @mixin foo($args...) { // $args is now a

    list! } h1 { @include foo(#000, #fff, #ddd); } Sass
  37. nested @import .foo { color: red; } somefile.sass

  38. nested @import h1 { @import “somefile.sass”; } CSS h1 .foo

    { color: red; } Sass
  39. questions? @roy

  40. thanks shorpy.com! for the awesome pictures