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
   

   View Slide

2. variables are old news
   

   View Slide

3. today’s lesson
   

   View Slide

4. sass isn’t broken
   

   View Slide

5. ✘
   client-side
   compilation
   

   View Slide

6. ✘
   consistent
   line numbers
   

   View Slide

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
   

   View Slide

8. ✘
   comments
   where wanted
   

   View Slide

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
   

   View Slide

10. ✘
    dynamic
    variables
    

    View Slide

11. dynamic variables
    $men-color: red;
    $women-color: green;
    $kids-color: blue;
    @each $context in men, women, kids {
    .foo-#{$context} {
    color: $#{$context}-color;
    }
    }
    Sass
    

    View Slide

12. dynamic variables
    CSS
    .foo-men { color: red; }
    .foo-women { color: green; }
    .foo-kids { color: blue; }
    ✘
    ✘
    ✘
    

    View Slide

13. View Slide

14. dynamic variables
    

    View Slide

15. ✘
    dynamic
    variables
    

    View Slide

16. nested lists
    

    View Slide

17. what’s a list?
    $color: blue;
    $color: red, blue;
    $color: (red, blue);
    $color: red blue;
    $color: (red blue);
    Sass
    

    View Slide

18. nested lists
    $colors: men red, women green, kids blue;
    @each $context in $colors {
    .foo-#{nth($context, 1)} {
    color: nth($context, 2);
    }
    }
    Sass
    

    View Slide

19. nested lists
    .foo-men {
    color: red; }
    .foo-women {
    color: green; }
    .foo-kids {
    color: blue; }
    CSS
    

    View Slide

20. nested lists
    in the real world
    

    View Slide

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
    

    View Slide

22. .teaser {
    margin-bottom: 25px;
    h1 { color: black; }
    .button { background: white; }
    @include colors('h1', 'color');
    @include colors('.button', 'background');
    }
    omgsass!
    Sass
    

    View Slide

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
    

    View Slide

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
    

    View Slide

25. nested lists
    & media queries
    

    View Slide

26. .foo {
    color: red;
    @include respond-to(tablet) {
    color: green;
    }
    @include respond-to(phone) {
    color: blue;
    }
    }
    Sass
    

    View Slide

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
    

    View Slide

28. .foo {
    color: red;
    }
    @media (max-width: 768px) {
    .foo { color: green; }
    }
    @media (max-width: 320px) {
    .foo { color: blue; }
    }
    CSS
    

    View Slide

29. handy tools
    

    View Slide

30. round(),
    ceil(), join()
    & many more!
    

    View Slide

31. dynamic button colors
    $bg-color: green;
    .button {
    background: $bg-color;
    @if lightness($bg-color) < 50% {
    color: white;
    } @else {
    color: black;
    }
    }
    Sass
    

    View Slide

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
    

    View Slide

33. $bg-color: green;
    .button {
    background: $bg-color;
    color: if(
    lightness($bg-color) < 50%,
    white,
    black
    );
    }
    Sass
    

    View Slide

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

    View Slide

35. retina sprites
    

    View Slide

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
    

    View Slide

37. more than compass
    

    View Slide

38. Bourbon,
    Foundation,
    Sassy Buttons,
    Zocial,
    Sass Twitter Bootstrap,
    Animate.sass,
    Forge (WP development with Sass),
    Susy,
    Gravity,
    BlankWork,
    Gridset
    and many more.
    

    View Slide

39. things you may not know
    

    View Slide

40. comments in production
    $year: 2013;
    /* Some comment. */
    /*! Comment #2. */
    /*! © #{$year} */
    /* Comment #2. */
    /* © 2013 */
    Sass CSS
    

    View Slide

41. unquote()
    @mixin border-radius($rad, $v-rad) {
    -moz-border-radius: $rad unquote("/") $v-rad;
    border-radius: $rad unquote("/") $v-rad;
    }
    Sass
    

    View Slide

42. unquote()
    .foo {
    color: unquote("$replaceme");
    }
    .foo {
    color: $replaceme;
    }
    CSS
    Sass
    

    View Slide

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
    

    View Slide

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
    

    View Slide

45. variable arguments
    @mixin foo($args...) {
    /* $args is a list now! */
    }
    h1 {
    @include foo(#000, #fff, #ddd);
    }
    Sass
    

    View Slide

46. sass globbing
    @import "library/mixins/*";
    @import "library/**/*";
    https://github.com/chriseppstein/sass-globbing / Sass
    

    View Slide

47. questions?
    @roy
    http://roy.io/realworld
    

    View Slide

48. thanks shorpy.com!
    for the awesome pictures
    

    View Slide