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

    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