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

Sass in the Real World

Sass in the Real World

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

Roy Tomeij

June 07, 2013
Tweet

More Decks by Roy Tomeij

Other Decks in Programming

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; } ✘ ✘ ✘
  13. None
  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