Sass in the Real World

A presentation aimed at intermediate Sass users, as presented at the Dutch PHP Conference / Dutch Mobile Conference.

Transcript

1. Sass in the Real World Roy Tomeij, @roy / AppSignal & SliceCraft
2. variables are old news
3. today’s lesson
4. sass isn’t broken
5. ✘ client-side compilation
6. ✘ consistent line numbers
7. consistent line numbers @mixin hide-text { text-indent: -999px; overflow: hidden; } .foo { width: 100%; @include hide-text; } .foo { width: 100%; text-indent: -999px; overflow: hidden; } Sass CSS
8. ✘ comments where wanted
9. comments where wanted .foo { color: #fff; /* Bar */ .bar {color: #ff0;} /* Baz */ .baz {color: #00f;} } .foo { color: #fff; /* Bar */ /* Baz */ } .foo .bar {...} .foo .baz {...} Sass CSS
10. ✘ dynamic variables
11. dynamic variables $men-color: red; $women-color: green; $kids-color: blue; @each $context in men, women, kids { .foo-#{$context} { color: $#{$context}-color; } } Sass
12. dynamic variables CSS .foo-men { color: red; } .foo-women { color: green; } .foo-kids { color: blue; } ✘ ✘ ✘
14. dynamic variables
15. ✘ dynamic variables
16. nested lists
17. what’s a list? $color: blue; $color: red, blue; $color: (red, blue); $color: red blue; $color: (red blue); Sass
18. nested lists $colors: men red, women green, kids blue; @each $context in $colors { .foo-#{nth($context, 1)} { color: nth($context, 2); } } Sass
19. nested lists .foo-men { color: red; } .foo-women { color: green; } .foo-kids { color: blue; } CSS
20. nested lists in the real world
21. $events-color: red; $ate-color: green; $essentials-color: blue; .teaser { margin-bottom: 25px; h1 { color: black; } .button { background: white; } &.events { h1 { color: $events-color; } .button { background: $events-color; } } } Sass
22. .teaser { margin-bottom: 25px; h1 { color: black; } .button { background: white; } @include colors('h1', 'color'); @include colors('.button', 'background'); } omgsass! Sass
23. $events-color: red; $ate-color: green; $essentials-color: blue; $colors: events $events-color, ate $ate-color, essentials $essentials-color; @mixin colors($selector, $properties) { @each $color in $colors { &.#{nth($color, 1)} #{$selector} { @each $property in $properties { #{$property}: nth($color, 2) } } } } Sass
24. .teaser { margin-bottom: 25px; } .teaser h1 { color: black; } .teaser .button { background: white; } .teaser.events h1 { color: red; } .teaser.ate h1 { color: green; } .teaser.essentials h1 { color: blue; } .teaser.events .button { background: red; } .teaser.ate .button { background: green; } .teaser.essentials .button { background: blue; } CSS
25. nested lists & media queries
26. .foo { color: red; @include respond-to(tablet) { color: green; } @include respond-to(phone) { color: blue; } } Sass
27. $devices: tablet 768px, phone 320px; @mixin respond-to($respond-to) { @each $device in $devices { @if nth($device, 1) == $respond-to { @media (max-width: nth($device, 2)) { @content; } } } } Sass
28. .foo { color: red; } @media (max-width: 768px) { .foo { color: green; } } @media (max-width: 320px) { .foo { color: blue; } } CSS
29. handy tools
30. round(), ceil(), join() & many more!
31. dynamic button colors $bg-color: green; .button { background: $bg-color; @if lightness($bg-color) < 50% { color: white; } @else { color: black; } } Sass
32. @function button-font-color($bg-color) { @if lightness($bg-color) < 50% { @return white; } @else { @return black; } } $bg-color: green; .button { background: $bg-color; color: button-font-color($bg-color); } Sass
33. $bg-color: green; .button { background: $bg-color; color: if( lightness($bg-color) < 50%, white, black ); } Sass
34. inline images .facebook { background: inline-image("facebook.png"); } .facebook { background: url('data:image/png;base64,…'); } CSS Sass + Compass
35. retina sprites
36. $sprites: sprite-map("sprites/*.png"); $sprites-retina: sprite-map("sprites-retina/*.png"); @mixin sprite-background($name) { width: image-width(sprite-file($sprites, $name)); height: image-height(sprite-file($sprites, $name)); background: sprite-url($sprites) sprite-position($sprites, $name) ↩ no-repeat; display: block; @media (-webkit-min-device-pixel-ratio: 2), (etc...) { @if (sprite-position($sprites, $name) != ↩ sprite-position($sprites-retina, $name)) { $ypos: round(nth(sprite-position($sprites-retina, $name), 2) / ↩ 2); background-position: 0 $ypos; } background-image: sprite-url($sprites-retina); @include background-size(ceil(image-width( ↩ sprite-path($sprites-retina)) / 2), auto); } } http://gist.github.com/2140082 / Sass + Compass
37. more than compass
38. Bourbon, Foundation, Sassy Buttons, Zocial, Sass Twitter Bootstrap, Animate.sass, Forge (WP development with Sass), Susy, Gravity, BlankWork, Gridset and many more.
39. things you may not know
40. comments in production $year: 2013; /* Some comment. */ /*! Comment #2. */ /*! © #{$year} */ /* Comment #2. */ /* © 2013 */ Sass CSS
41. unquote() @mixin border-radius($rad, $v-rad) { -moz-border-radius: $rad unquote("/") $v-rad; border-radius: $rad unquote("/") $v-rad; } Sass
42. unquote() .foo { color: unquote("$replaceme"); } .foo { color: $replaceme; } CSS Sass
43. .foo { box-shadow: 1px 1px 1px red; .no-boxshadow & { border: solid 1px red; } } .foo { box-shadow: 1px 1px 1px red; } .no-boxshadow .foo { border: solid 1px red; } CSS Sass parent reference
44. variable defaults @import "settings"; $default-radius: 10px !default; @mixin border-radius($radius: $default-radius) { border-radius: $default-radius; } Sass $default-radius: 15px; settings.scss
45. variable arguments @mixin foo($args...) { /* $args is a list now! */ } h1 { @include foo(#000, #fff, #ddd); } Sass
46. sass globbing @import "library/mixins/*"; @import "library/**/*"; https://github.com/chriseppstein/sass-globbing / Sass
47. questions? @roy http://roy.io/realworld
48. thanks shorpy.com! for the awesome pictures