Untangle your stylesheets with Sass

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

Transcript

1. Untangle your stylesheets untangle your stylesheets Roy Tomeij / @roy, 80beans
2. writing CSS isn’t fun
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
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