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

Untangle your stylesheets with Sass

C7c016bb64e49709c083c9cf25d39d8c?s=47 Roy Tomeij
October 15, 2012

Untangle your stylesheets with Sass

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

C7c016bb64e49709c083c9cf25d39d8c?s=128

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("image@2X.png"); } } Sass
  27. retina mixin h1 { background: url('image.png'); } @media (min--moz-device-pixel-ratio: 1.5),

    … { h1 { background: url('image@2X.png'); } } 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