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

Lazy Dev's Dash through Sass

Lazy Dev's Dash through Sass

CSS can do all these amazing things now: Animations! Gradients! Transforms! Yet, it’s tricky to remember every vendor prefix and, blech, time consuming to do everything by hand. Let’s take a mad dash through CSS automation with Sass and other handy tools to automate ALL THE THINGS CSS (including those amazing things), traveling but one path to a faster, easier, and more reliable way to develop websites and web applications.

Kitt Hodsden

July 17, 2013
Tweet

More Decks by Kitt Hodsden

Other Decks in Programming

Transcript

  1. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    With a bit of Grunt and
    Automation for good measure.
    A LAZY CSS DEV’S
    DASH THROUGH SASS

    View Slide

  2. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    2

    View Slide

  3. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    3

    View Slide

  4. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    With a bit of Grunt and
    Automation for good measure.
    A LAZY CSS DEV’S
    DASH THROUGH SASS

    View Slide

  5. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    A LAZY CSS DEV’S
    DASH THROUGH SASS
    Look up here for the why.
    With a bit of Grunt and
    Automation for good measure.

    View Slide

  6. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    HI.
    6

    View Slide

  7. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    WHO ARE YOU?
    7
    I will adjust the talk depending on the audience.

    View Slide

  8. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    WHO AM I?
    8
    Why should you listen to me?

    View Slide

  9. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    9

    View Slide

  10. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    NOT A BAD THING!
    10
    Really, laziness is okay.

    View Slide

  11. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    Laziness – The quality that makes you go
    to great effort to reduce overall energy
    expenditure. It makes you write labor-
    saving programs that other people will find
    useful, and document what you wrote so
    you don't have to answer so many
    questions about it. Hence, the first great
    virtue of a programmer.
    http://en.wikipedia.org/wiki/Larry_Wall
    11

    View Slide

  12. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    CSS
    12
    Why you’re here.

    View Slide

  13. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    13
    dev[405]% grep background-color *
    style.css: background-color: #edf5fa;
    style.css: background-color: #ddecf5;
    style.css: background-color: #e6f1f7;
    style.css: background-color: #d4e7f3;
    style.css: background-color: #edf5fa;
    style.css: background-color: #fcfce8;
    style.css: background-color: #fcf9e5;
    style.css: background-color: #fbf5cf;
    style.css: background-color: #fefefe;
    style.css: background-color: #f5f5f5;
    style.css: background-color: #fdf5e6;
    style.css: background-color: #fdf2de;
    style.css: background-color: #fbe4e4;
    style.css: background-color: #fbdbdb;
    style.css: background-color: #ffcccc;
    style.css: background-color: #ffffdd;
    style.css: background-color: #ddffdd;
    Why you’re here? This crap.

    View Slide

  14. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    14
    #fcfce8
    This crap, too.

    View Slide

  15. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    15
    #fcf9e5
    I can’t tell this color from the previous color.

    View Slide

  16. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    16
    And this?
    ...
    background: -moz-linear-gradient(right, ...
    background: -webkit-gradient(linear, ...
    background: -webkit-linear-gradient(right, ...
    background: -o-linear-gradient(right, ...
    background: -ms-linear-gradient(right, ...
    background: linear-gradient(right, ...
    filter: progid:DXImageTransform.Microsoft...
    ...

    View Slide

  17. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    17
    What I might look like after a couple hours of CSS...

    View Slide

  18. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    SASS
    18
    Why you’re REALLY here.

    View Slide

  19. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    SASS
    19
    While it is an acronym...

    View Slide

  20. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    Sass.
    20
    http://sass-lang.com/
    ... it’s not an acronym.

    View Slide

  21. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    Sass is an extension of CSS3 which
    adds nested rules, variables, mixins,
    selector inheritance, and more. Sass
    generates well formatted CSS and
    makes your stylesheets easier to
    organize and maintain.
    21
    Why you’re REALLY here.

    View Slide

  22. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    LET’S DASH!
    22
    Whee!

    View Slide

  23. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    OH WAIT...
    23
    Shoot.

    View Slide

  24. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    INSTALLATION
    24
    Oh, right, the tools.

    View Slide

  25. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    RUBY
    25
    Installation information

    View Slide

  26. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    ON A MAC?
    26
    Installation information - ruby on OSX

    View Slide

  27. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    27
    Installation information - ruby on OSX

    View Slide

  28. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    OR, MAYBE NOT
    28
    Installation information - ruby on OSX

    View Slide

  29. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    29
    $ ruby --version
    ruby 1.8.7 (2012-02-08 patchlevel 358)
    Installation information - ruby on OSX

    View Slide

  30. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    30
    HOMEBREW
    http://mxcl.github.com/homebrew/
    Installation information - ruby on OSX

    View Slide

  31. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    31
    HOMEBREW
    http://mxcl.github.com/homebrew/
    Installation information - ruby on OSX

    View Slide

  32. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    32
    Installation information - ruby on OSX
    $ brew install ruby

    View Slide

  33. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    RVM
    RUBY VERSION MANAGER
    33
    Installation information
    https://rvm.io/rvm/install

    View Slide

  34. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    34
    Installation information - ruby on OSX
    $ curl -L https://get.rvm.io | \
    bash -s stable --ruby

    View Slide

  35. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    LINUX?
    35
    Installation information - ruby

    View Slide

  36. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    36
    Installation information - ruby on linux
    # apt-get install ruby1.9.1
    $ sudo apt-get install ruby1.9.1

    View Slide

  37. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    37
    Installation information - ruby on linux
    # yum install ruby1.9.1
    $ sudo yum install ruby1.9.1

    View Slide

  38. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    38
    Installation information - ruby on linux
    # pacman -S ruby
    $ sudo pacman -S ruby

    View Slide

  39. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    RVM
    RUBY VERSION MANAGER
    39
    Installation information
    https://rvm.io/rvm/install

    View Slide

  40. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    WINDOWS?
    40
    Installation information

    View Slide

  41. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    RUBYINSTALLER = FRIEND
    41
    Installation information - ruby on windows
    http://rubyinstaller.org/downloads/

    View Slide

  42. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    RUBYINSTALLER = FRIEND
    42
    BE LAZY!
    http://rubyinstaller.org/downloads/

    View Slide

  43. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    FINALLY!
    43
    Now we can install Sass.

    View Slide

  44. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    44
    $ gem update --system
    $ gem install sass
    $ sudo gem update --system
    $ sudo gem install sass
    Yay! Sass installed!

    View Slide

  45. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    COMPASS
    45
    But, wait! There’s more!
    http://compass-style.org/install/

    View Slide

  46. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    46
    $ gem update --system
    $ gem install compass
    $ sudo gem update --system
    $ sudo gem install compass
    Setting up tools. In this case, Compass.

    View Slide

  47. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    WHY?
    47
    Setting up tools - Why install Compass?

    View Slide

  48. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    GRUNT
    48
    Setting up tools - install Grunt to automate things
    http://gruntjs.com/

    View Slide

  49. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    NODE
    49
    Setting up tools - need node to install Grunt
    http://nodejs.org/

    View Slide

  50. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    50
    http://www.flickr.com/photos/postbear/7445381260

    View Slide

  51. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    51
    $ npm install grunt-contrib-watch
    Setting up tools, installing the Grunt watch module for live reloading of pages
    https://github.com/gruntjs/grunt-contrib-watch

    View Slide

  52. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    LIVERELOAD
    52
    Setting up tools - if Grunt is too heavy, use LiveReload
    http://livereload.com/

    View Slide

  53. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    GAH!
    53
    Maybe too much command line?

    View Slide

  54. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    SCOUT
    54
    Skip the command line if you need to.
    http://mhs.github.io/scout-app/

    View Slide

  55. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    PHEW!
    55
    Done setting up tools (actually, we skipped a bunch of it)

    View Slide

  56. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    OVERVIEW
    56
    Going to talk about Sass now. Really.

    View Slide

  57. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    57
    // files
    $ sass --watch styles.scss:styles.css
    // directories
    $ sass --watch scss:css
    // with compass
    $ compass watch project-dir
    Using Sass at its basic level

    View Slide

  58. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    $variables
    58
    Sass dash, talking variables

    View Slide

  59. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    59
    dev[405]% grep background-color *
    style.css: background-color: #edf5fa;
    style.css: background-color: #ddecf5;
    style.css: background-color: #e6f1f7;
    style.css: background-color: #d4e7f3;
    style.css: background-color: #edf5fa;
    style.css: background-color: #fcfce8;
    style.css: background-color: #fcf9e5;
    style.css: background-color: #fbf5cf;
    style.css: background-color: #fefefe;
    style.css: background-color: #f5f5f5;
    style.css: background-color: #fdf5e6;
    style.css: background-color: #fdf2de;
    style.css: background-color: #fbe4e4;
    style.css: background-color: #fbdbdb;
    style.css: background-color: #ffcccc;
    style.css: background-color: #ffffdd;
    style.css: background-color: #ddffdd;
    Before variables...

    View Slide

  60. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    60
    $color-main: rgb(255,251,114); // #FFFB72
    $color-second: rgb(70,87,204); // #4657CC
    $color-hilite: rgb(189,177,255); // #BDB1FF
    After variables!

    View Slide

  61. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    61
    $color-main: rgb(255,251,114);
    $color-second: rgb(70,87,204);
    $color-hilite: rgb(189,177,255);
    ...
    .button {
    background-color: $color-main;
    ...
    }
    See? Easy!

    View Slide

  62. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    62
    /* line 22, ../scss/styles.scss */
    .button {
    background-color: #fffb72;
    ...
    }
    Sass dash, talking variables

    View Slide

  63. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    63
    $font-times: Cambria, "Hoefler Text", Utopia,
    "Liberation Serif", "Nimbus Roman No9 L Regular",
    Times, "Times New Roman", serif;
    $font-garamond: "Palatino Linotype", Palatino,
    Palladio, "URW Palladio L", "Book Antiqua",
    Baskerville, "Bookman Old Style", "Bitstream
    Charter", "Nimbus Roman No9 L", Garamond, "Apple
    Garamond", "ITC Garamond Narrow", "New Century
    Schoolbook", "Century Schoolbook", "Century
    Schoolbook L", Georgia, serif;
    Uses of variables: fonts
    http://css-tricks.com/snippets/css/font-stacks/

    View Slide

  64. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    64
    $debug-this-crap: 1;
    Uses of variables: development settings

    View Slide

  65. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    65
    http://www.makemylogobiggercream.com/
    Uses of variables: make the logo bigger

    View Slide

  66. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    NESTING!
    66
    Sass Overview

    View Slide

  67. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    67
    .navigation {
    a {
    display: block;
    padding: .5em;
    color: $color-link;
    border: none;
    }
    b {
    font-size: .9em;
    }
    span {
    display: block;
    font-size: .8em;
    }
    }
    .navigation a {
    display: block;
    padding: .5em;
    color: #444040;
    border: none;
    }
    .navigation b {
    font-size: .9em;
    }
    .navigation span {
    display: block;
    font-size: .8em;
    }
    Sass syntax, talking nesting

    View Slide

  68. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    68
    $color-link: #444040;
    $color-link-hilite: #994040;
    $color-link-active: #660040;
    a {
    color: $color-link;
    &:hover, &:focus {
    color: $color-link-hilite;
    }
    &:visited, &:active {
    color: $color-link-active;
    }
    }
    Sass syntax, talking nesting

    View Slide

  69. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    69
    a {
    color: #444040;
    }
    a:hover, a:focus {
    color: #994040;
    }
    a:visited, a:active {
    color: #660040;
    }
    Sass syntax, talking nesting

    View Slide

  70. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    DON’T NEST MORE
    THAN THREE LEVELS.
    70
    Sass syntax, nesting best practice
    http://css-tricks.com/sass-style-guide/

    View Slide

  71. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    @extend
    71
    Sass syntax, @extend

    View Slide

  72. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    72
    Sass syntax, talking @extend
    .box {
    padding: 2em;
    color: $color-text;
    background-color: $color-bg;
    }
    .box-warning {
    @extend .box;
    border: 2px dotted $color-yikes;
    }
    .box-success {
    @extend .box;
    border: 2px dotted $color-success;
    }
    .box-info {
    @extend .box;
    border: 2px dotted $color-info;
    }

    View Slide

  73. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    73
    Sass syntax, talking @extend
    .box, .box-warning, .box-success, .box-info {
    padding: 2em;
    color: #333333;
    background-color: white;
    }
    .box-warning {
    border: 2px dotted #cc0000;
    }
    .box-success{
    border: 2px dotted #33cc00;
    }
    .box-info {
    border: 2px dotted #996633;
    }

    View Slide

  74. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    74
    Sass syntax, talking @extend

    ...

    View Slide

  75. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    75
    Sass syntax, talking @extend

    ...

    View Slide

  76. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    @mixin
    76
    Sass syntax, @mixin

    View Slide

  77. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    @mixin
    77
    Sass syntax, @mixin
    (@include)

    View Slide

  78. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    78
    Sass syntax, @mixin
    @mixin boxsize($bs-type: border-box) {
    -webkit-box-sizing: $bs-type;
    -moz-box-sizing: $bs-type;
    box-sizing: $bs-type;
    }
    * {
    @include boxsize(content-box);
    }

    View Slide

  79. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    79
    Sass syntax, @mixin
    * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    }

    View Slide

  80. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    80
    Sass syntax, @mixin
    @mixin module($parent-color) {
    color: darken($parent-color, 50%);
    }
    .main_module {
    @include module(#ccc);
    min-height: 3em;
    }
    .sidebar_module {
    @include module(#444);
    min-height: 2em;
    }

    View Slide

  81. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    DON’T DO THAT.
    81
    Sass syntax, use what other people have done.

    View Slide

  82. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    82
    Sass syntax, @mixin
    @import "compass/css3/box-sizing";
    * {
    @include box-sizing(border-box);
    }
    http://compass-style.org/reference/compass/css3/box_sizing/

    View Slide

  83. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    83
    Sass syntax, @mixin
    @import "compass/css3/box-sizing";
    * {
    @include box-sizing(border-box);
    }
    http://compass-style.org/reference/compass/css3/box_sizing/

    View Slide

  84. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    @mixin vs @extend
    84
    Sass Overview

    View Slide

  85. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    MATH!
    85
    Sass Overview

    View Slide

  86. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    86
    Sass syntax, math!
    .addition {
    width: 20% + 80%;
    }
    .subtraction {
    width: 80% - 20%;
    }
    .multiplication {
    width: 20 * 80px;
    }
    .division {
    width: (80%/20);
    }

    View Slide

  87. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    87
    .division {
    width: 80%/20; // whoops!
    }
    Sass syntax, math!

    View Slide

  88. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    @function
    88
    Sass Overview

    View Slide

  89. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    http://timhettler.github.io/cssconf-2013
    89
    Sass Overview

    View Slide

  90. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    @if
    @else
    90
    Sass Overview

    View Slide

  91. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    91
    @function get-button-color($color) {
    @return if(lightness($color) > 50, #333, #fff );
    }
    Sass syntax, logic control

    View Slide

  92. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    @for
    92
    Are you even looking at this?

    View Slide

  93. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    93
    @for $i from 1 through 4 {
    .buy_#{$i} {
    background-image: image-url("buy_#{$i}.png");
    }
    }
    Sass syntax, use @for on background images

    View Slide

  94. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    94
    .buy_1 {
    background-image: url('../img/buy_1.png?135785329');
    }
    .buy_2 {
    background-image: url('../img/buy_2.png?157858011');
    }
    .buy_3 {
    background-image: url('../img/buy_3.png?357858078');
    }
    .buy_4 {
    background-image: url('../img/buy_4.png?135788103');
    }
    Sass syntax, use @for on background images

    View Slide

  95. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    @each
    95
    Sass syntax, use @each on background images

    View Slide

  96. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    96
    // @each example
    @each $animal in puma, sea-slug, egret, salamander {
    .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    }
    }
    Sass syntax, use @each on background images
    http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#id8

    View Slide

  97. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    97
    // @each example
    @each $animal in puma, sea-slug, egret, salamander {
    .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    }
    }
    Sass syntax, note use of #{...} for variable interpolation
    http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#interpolation_

    View Slide

  98. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    98
    // @each example output
    .puma-icon {
    background-image: url('/images/puma.png');
    }
    .sea-slug-icon {
    background-image: url('/images/sea-slug.png');
    }
    .egret-icon {
    background-image: url('/images/egret.png');
    }
    .salamander-icon {
    background-image: url('/images/salamander.png');
    }
    Sass syntax, use @each on background images

    View Slide

  99. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    MORE PHEW!
    99
    Deep breath...

    View Slide

  100. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    100
    Setting up projects

    View Slide

  101. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    101
    Getting started
    $ mv css/styles.css scss/styles.scss

    View Slide

  102. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    _partials.scss
    102
    Partials to organize the files

    View Slide

  103. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    103
    Organizing CSS

    View Slide

  104. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    104
    Interface Inventories

    View Slide

  105. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    CHROME DEVTOOLS
    105
    All

    View Slide

  106. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    CHROME DEVTOOLS
    106
    FIRESASS
    All the ...

    View Slide

  107. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    CHROME DEVTOOLS
    107
    FIRESASS
    SOURCE MAPS
    All the tools ...

    View Slide

  108. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    CHROME DEVTOOLS
    108
    FIRESASS
    SOURCE MAPS
    CSSCSS
    All the tools I won’t ...

    View Slide

  109. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    CHROME DEVTOOLS
    109
    FIRESASS
    SOURCE MAPS
    CSSCSS
    SPRITES
    All the tools I won’t get to.

    View Slide

  110. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    CHROME DEVTOOLS
    110
    FIRESASS
    SOURCE MAPS
    CSSCSS
    SPRITES
    All the tools I won’t get to.
    MEDIA QUERIES

    View Slide

  111. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    THE GOOD STUFF!
    111

    View Slide

  112. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    GRADIENTS
    112

    View Slide

  113. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    linear
    113

    View Slide

  114. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    114
    background: #1e5799; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/
    Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0
    iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI
    +CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2
    VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc
    2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZz
    ZXQ9IjQ5JSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZ
    zZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZm
    ZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR
    3JhZGllbnQ
    +CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2
    ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #1e5799 0%, #207cca 49%, #2989d8 50%, #7db9e8
    100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799),
    color-stop(49%,#207cca), color-stop(50%,#2989d8), color-stop(100%,#7db9e8)); /*
    Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #1e5799 0%,#207cca 49%,#2989d8 50%,#7db9e8
    100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #1e5799 0%,#207cca 49%,#2989d8 50%,#7db9e8
    100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #1e5799 0%,#207cca 49%,#2989d8 50%,#7db9e8
    100%); /* IE10+ */
    background: linear-gradient(to bottom, #1e5799 0%,#207cca 49%,#2989d8 50%,#7db9e8
    100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799',
    endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */
    http://www.colorzilla.com/gradient-editor/
    Looking at how bad linear-gradient CSS can be.

    View Slide

  115. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    115
    Now consider adjusting this gradient. O_o
    http://www.colorzilla.com/gradient-editor/

    View Slide

  116. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    116
    background: #1e5799; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/
    Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0
    iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI
    +CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2
    VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc
    2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZz
    ZXQ9IjQ5JSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZ
    zZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZm
    ZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR
    3JhZGllbnQ
    +CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2
    ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #1e5799 0%, #207cca 49%, #2989d8 50%, #7db9e8
    100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799),
    color-stop(49%,#207cca), color-stop(50%,#2989d8), color-stop(100%,#7db9e8)); /*
    Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #1e5799 0%,#207cca 49%,#2989d8 50%,#7db9e8
    100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #1e5799 0%,#207cca 49%,#2989d8 50%,#7db9e8
    100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #1e5799 0%,#207cca 49%,#2989d8 50%,#7db9e8
    100%); /* IE10+ */
    background: linear-gradient(to bottom, #1e5799 0%,#207cca 49%,#2989d8 50%,#7db9e8
    100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799',
    endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */
    http://www.colorzilla.com/gradient-editor/
    Looking at how bad linear-gradient CSS can be.

    View Slide

  117. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    117
    Let’s use Compass! Be lazy!
    @import "compass";
    ...
    #simple {
    @include background-image(linear-gradient(#1e5799 0%,
    #207cca 49%, #2989d8 50%, #7db9e8 100%));
    }
    http://compass-style.org/reference/compass/css3/gradient/

    View Slide

  118. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    118
    Using CSS gradients, results are the same

    View Slide

  119. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    119
    Using variables!
    @import "compass";
    ...
    #simple {
    @include background-image(linear-gradient($main-
    color-darken 0%, $main-color 49%, $main-color-tint
    50%, $main-color-light 100%));
    }
    http://compass-style.org/reference/compass/css3/gradient/

    View Slide

  120. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    120
    Maybe you have something crazy...
    @import "compass";
    ...
    #on-drugs {
    @include background-image(linear-gradient(left, red
    0%, orange 20%, yellow 40%, green 60%, blue 80%,
    purple 100%));
    }

    View Slide

  121. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    121
    ... like your designer is happily high on life.

    View Slide

  122. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    122
    We can force hard stops in gradients
    @import "compass";
    ...
    #hard-edges {
    @include background-image(linear-gradient(left, red
    0%, red 19.9%, orange 20%, orange 39.9%, yellow 40%,
    yellow 59.9%, green 60%, green 79.9%, blue 80% , blue
    99.9%, purple 100%));
    }

    View Slide

  123. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    123
    Hard gradient stops

    View Slide

  124. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    124
    Can control color transitions...
    @import "compass";
    ...
    $fade-edge: 5%;
    $edge1: 20%;
    $edge2: 40%;
    $edge3: 60%;
    $edge4: 80%;
    $edge5: 100%;
    #crown-fades {
    @include background-image(linear-gradient(left, red
    0%, red ($edge1 - $fade-edge), orange 20%, orange
    ($edge2 - $fade-edge), yellow $edge2, yellow ($edge3 -
    $fade-edge), green $edge3, green ($edge4 - $fade-
    edge), blue $edge4, blue ($edge5 - $fade-edge), purple
    $edge5));
    }

    View Slide

  125. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    125
    But doesn’t always look good

    View Slide

  126. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    radial
    126

    View Slide

  127. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    127
    Still talking gradients, radial ones now.
    @import "compass";
    ...
    #radial-gradient {
    @include background-image(radial-gradient(120px
    120px, pink 80px, red 120px));
    }

    View Slide

  128. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    128
    Radial gradients. What does it mean?

    View Slide

  129. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    129
    Radial gradients: a better example.

    View Slide

  130. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    130
    Still talking gradients, radial ones now.





    Yay background.

    Next


    View Slide

  131. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    131
    Still talking gradients, radial ones now.
    $cssconf-bg: #96cd23;
    body.cssconf {
    background-color: $cssconf-bg;
    }

    View Slide

  132. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    132
    Still talking gradients, radial ones now.
    $cssconf-bg: #96cd23;
    body {
    &.cssconf {
    background-color: $cssconf-bg;
    }

    View Slide

  133. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    133
    Still talking gradients, radial ones now.
    $cssconf-bg: #96cd23;
    body {
    &.cssconf {
    background-color: $cssconf-bg;
    }

    View Slide

  134. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    134
    Still talking gradients, radial ones now.

    View Slide

  135. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    135
    Still talking gradients, radial ones now.
    $cssconf-fg1: rgba(204,102,153,0) 64%;
    $cssconf-fg2: #cc6699 66%;
    $cssconf-fg3: #cc6699 75%;
    $cssconf-fg4: rgba(204,102,153,0) 77%;
    $cssconf-fg5: rgba(255,204,0,0) 90%;
    $cssconf-fg6: #ffcc00 92%;
    body {
    &.step2 {
    @include background-image(radial-gradient($cssconf-
    fg1, $cssconf-fg2, $cssconf-fg3,$cssconf-fg4,
    $cssconf-fg5, $cssconf-fg6));
    }
    }

    View Slide

  136. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    136
    Still talking gradients, radial ones now.
    $cssconf-fg1: rgba(204,102,153,0) 64%;
    $cssconf-fg2: #cc6699 66%;
    $cssconf-fg3: #cc6699 75%;
    $cssconf-fg4: rgba(204,102,153,0) 77%;
    $cssconf-fg5: rgba(255,204,0,0) 90%;
    $cssconf-fg6: #ffcc00 92%;
    body {
    &.step2 {
    @include background-image(radial-gradient($cssconf-
    fg1, $cssconf-fg2, $cssconf-fg3,$cssconf-fg4,
    $cssconf-fg5, $cssconf-fg6), radial-gradient($cssconf-
    fg1, $cssconf-fg2, $cssconf-fg3,$cssconf-fg4,
    $cssconf-fg5, $cssconf-fg6));
    }
    }

    View Slide

  137. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    137
    Still talking gradients, radial ones now.

    View Slide

  138. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    138
    Still talking gradients, radial ones now.
    $bg-size: 200px;
    body {
    &.step3 {
    background-size: $bg-size $bg-size;
    }
    }

    View Slide

  139. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    139
    Still talking gradients, radial ones now.

    View Slide

  140. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    140
    Still talking gradients, radial ones now.
    $cssconf-fg1: rgba(204,102,153,0) 64%;
    $cssconf-fg2: #cc6699 66%;
    $cssconf-fg3: #cc6699 75%;
    $cssconf-fg4: rgba(204,102,153,0) 77%;
    $cssconf-fg5: rgba(255,204,0,0) 90%;
    $cssconf-fg6: #ffcc00 92%;
    body {
    &.step2 {
    @include background-image(radial-
    gradient($cssconf-fg1, $cssconf-fg2, $cssconf-
    fg3,$cssconf-fg4, $cssconf-fg5, $cssconf-fg6),
    radial-gradient($cssconf-fg1, $cssconf-fg2,
    $cssconf-fg3,$cssconf-fg4, $cssconf-fg5, $cssconf-
    fg6));
    }
    }

    View Slide

  141. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    141
    Still talking gradients, radial ones now.
    $bg-size: 200px;
    $bg-offset: ($bg-size / 2);
    body {
    &.step4 {
    background-position-x: 0px, $bg-offset;
    background-position-y: 0px, $bg-offset;
    }
    }

    View Slide

  142. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    142
    Still talking gradients, radial ones now.

    View Slide

  143. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    143
    Still talking gradients, radial ones now.
    $cssconf-bg: #96cd23;
    $cssconf-fg1: rgba(204,102,153,0) 64%;
    $cssconf-fg2: #cc6699 66%;
    $cssconf-fg3: #cc6699 75%;
    $cssconf-fg4: rgba(204,102,153,0) 77%;
    $cssconf-fg5: rgba(255,204,0,0) 90%;
    $cssconf-fg6: #ffcc00 92%;
    $cssconf-hilite1: #ffcc00;
    $bg-size: 200px;
    $bg-offset: ($bg-size / 2);
    body {
    &.cssconf {
    background-color: $cssconf-bg;
    }
    &.step2 {
    @include background-image(radial-gradient($cssconf-fg1, $cssconf-fg2, $cssconf-fg3,$cssconf-
    fg4, $cssconf-fg5, $cssconf-fg6), radial-gradient($cssconf-fg1, $cssconf-fg2, $cssconf-
    fg3,$cssconf-fg4, $cssconf-fg5, $cssconf-fg6));
    }
    &.step3 {
    background-size: $bg-size $bg-size;
    }
    &.step4 {
    background-position-x: 0px, $bg-offset;
    background-position-y: 0px, $bg-offset;
    }
    }

    View Slide

  144. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    144
    Still on gradients, showing the Sass variables

    View Slide

  145. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    145
    Still talking gradients, radial ones now.
    $cssconf-bg: #ff800d;
    $cssconf-fg1: rgba(255,45,13,0) 64%;
    $cssconf-fg2: #ff2d0d 66%;
    $cssconf-fg3: #ff2d0d 75%;
    $cssconf-fg4: rgba(255,45,13,0) 77%;
    $cssconf-fg5: rgba(255,204,0,0) 90%;
    $cssconf-fg6: #ffcc00 92%;
    $cssconf-hilite1: #ff6c00;
    $bg-size: 100px;
    $bg-offset: ($bg-size / 2);

    View Slide

  146. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    146
    Still on gradients, showing the Sass variables

    View Slide

  147. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    147
    $color-pink: pink;
    body {
    &.owc6 {
    $dark-pink: darken($color-pink, 10%);
    $light-comp-pink:
    lighten(complement($color-pink), 10%);
    $comp-pink: complement($color-pink);
    @include background(image-
    url("line.png"),linear-gradient(top,
    $dark-pink 0px, $dark-pink 10px, $light-
    comp-pink 10px, $comp-pink 100%));
    }
    }
    Still on gradients, showing off lighten, darken, complement
    http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html

    View Slide

  148. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    148
    $color-pink: pink;
    body {
    &.owc6 {
    $dark-pink: darken($color-pink, 10%);
    $light-comp-pink:
    lighten(complement($color-pink), 10%);
    $comp-pink: complement($color-pink);
    @include background(image-
    url("line.png"),linear-gradient(top,
    $dark-pink 0px, $dark-pink 10px, $light-
    comp-pink 10px, $comp-pink 100%));
    }
    }
    Still on gradients, showing off lighten, darken, complement
    http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html

    View Slide

  149. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    149
    Still on gradients, showing off lighten, darken, complement

    View Slide

  150. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    150
    Those gradients! Gosh! You can do a lot!
    http://lea.verou.me/css3patterns/

    View Slide

  151. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    INTERLUDE
    151

    View Slide

  152. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    TRANSFORMS
    152

    View Slide

  153. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    153








    index


    Transform example HTML

    View Slide

  154. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    154
    @import "compass/css3/transform";
    $ifsize: 400px;
    iframe {
    height: $ifsize;
    width: $ifsize;
    border: 3px solid red;
    }
    .transform-me {
    }
    Transforms with Compass

    View Slide

  155. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    155
    Transform example page

    View Slide

  156. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    156
    @import "compass/css3/transform";
    $ifsize: 400px;
    iframe {
    height: $ifsize;
    width: $ifsize;
    border: 3px solid red;
    }
    .transform-me {
    @include rotate(90deg);
    }
    Transforms with Compass

    View Slide

  157. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    157
    Transform example page

    View Slide

  158. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    158
    @import "compass/css3/transform";
    $ifsize: 400px;
    iframe {
    height: $ifsize;
    width: $ifsize;
    border: 3px solid red;
    }
    .transform-me {
    @include transform-origin(($ifsize/2), ($ifsize/
    2));
    @include rotate(90deg);
    }
    Transforms with Compass

    View Slide

  159. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    159
    Transform example page

    View Slide

  160. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    160
    @import "compass/css3/transform";
    .transform-me {
    @include scaleX(0.5);
    }
    Transforms with Compass

    View Slide

  161. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    161
    Transform example page

    View Slide

  162. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    ANIMATIONS!
    162
    Ooooooo! The good stuff!

    View Slide

  163. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    DEFINITION
    163
    Two parts of CSS animations, first is:

    View Slide

  164. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    164
    animation-delay: 0s;
    animation-direction: alternate;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: ninja;
    animation-timing-function: ease-in;
    CSS Animations: defining the animation

    View Slide

  165. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    165
    -moz-animation-duration: 3s;
    -webkit-animation-duration: 3s;
    -moz-animation-name: slidein;
    -webkit-animation-name: slidein;
    -moz-animation-iteration-count: 3;
    -webkit-animation-iteration-count: 3;
    -moz-animation-direction: alternate;
    -webkit-animation-direction: alternate;
    CSS Animations: defining the animation

    View Slide

  166. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    KEYFRAMES
    166
    Two parts of CSS animations, second is:

    View Slide

  167. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    167
    @-moz-keyframes ninja {
    from {
    margin-left:100%;
    width:300%
    }
    to {
    margin-left:0%;
    width:100%;
    }
    }
    @-webkit-keyframes ninja {
    from {
    margin-left:100%;
    width:300%
    }
    to {
    margin-left:0%;
    width:100%;
    }
    }
    CSS Animations: defining the animation

    View Slide

  168. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    168
    Ninjas!
    http://vmfarms.com/our-platform/ruby/

    View Slide

  169. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    169
    Not so ninja!

    View Slide

  170. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    170










    CSS Animations: ninja example HTML

    View Slide

  171. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    171
    $ninja-size: 390px;
    .ninja {
    background: transparent url("../img/rope.png") no-repeat;
    background-size: $ninja-size;
    height: ($ninja-size * 2);
    width: $ninja-size;
    }
    CSS Animations: ninja css start

    View Slide

  172. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    172
    @-webkit-keyframes ninjamove {
    from {
    -webkit-transform: translateX(-30px);
    }
    to {
    -webkit-transform: translateX(300px);
    }
    }
    .ninja {
    background: transparent url("../img/rope.png") no-repeat;
    background-size: $ninja-size;
    width: $ninja-size;
    height: ($ninja-size*2);
    -webkit-animation-duration: 1s;
    -webkit-animation-direction: alternate;
    -webkit-animation-name: ninjamove;
    -webkit-animation-iteration-count: infinite;
    }
    CSS Animations: well, this works. sorta.

    View Slide

  173. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    173
    Not so ninja!

    View Slide

  174. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    174
    @mixin animation ($delay, $duration, $animation, $dir, $count) {
    -webkit-animation-delay: $delay;
    -webkit-animation-duration: $duration;
    -webkit-animation-name: $animation;
    -webkit-animation-direction: $dir;
    -webkit-animation-iteration-count: $count;
    -moz-animation-delay: $delay;
    -moz-animation-duration: $duration;
    -moz-animation-name: $animation;
    -moz-animation-direction: $dir;
    -moz-animation-iteration-count: $count;
    -o-animation-delay: $delay;
    -o-animation-duration: $duration;
    -o-animation-name: $animation;
    -o-animation-direction: $dir;
    -o-animation-iteration-count: $count;
    animation-delay: $delay;
    animation-duration: $duration;
    animation-name: $animation;
    animation-direction: $dir;
    animation-iteration-count: $count;
    }
    CSS Animations: creating the animation mixin
    https://gist.github.com/Integralist/3931680

    View Slide

  175. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    175
    @mixin keyframe ($animation_name) {
    @-webkit-keyframes $animation_name {
    @content;
    }
    @-moz-keyframes $animation_name {
    @content;
    }
    @-o-keyframes $animation_name {
    @content;
    }
    @keyframes $animation_name {
    @content;
    }
    }
    CSS Animations: sassin’ the keyframes
    https://gist.github.com/Integralist/3931680

    View Slide

  176. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    176
    @include keyframe(ninjamove) {
    from {
    @include translateX($from);
    }
    to {
    @include translateX($to);
    }
    }
    CSS Animations: example of keyframes
    https://gist.github.com/Integralist/3931680

    View Slide

  177. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    177
    @-webkit-keyframes ninjamove {
    from {
    -webkit-transform: translateX(-30px);
    }
    to {
    -webkit-transform: translateX(300px);
    }
    }
    .ninja {
    background: transparent url("../img/ninja.png") no-repeat;
    background-size: $ninja-size;
    width: $ninja-size;
    height: ($ninja-size*2);
    -webkit-animation-duration: 1s;
    -webkit-animation-direction: alternate;
    -webkit-animation-name: ninjamove;
    -webkit-animation-iteration-count: infinite;
    }
    CSS Animations: what we had before

    View Slide

  178. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    178
    $ninja-size: 390px;
    $from: 0px;
    $to: 400px;
    $dura: 1s;
    @include keyframe(ninjamove) {
    from {
    @include translateX($from);
    }
    to {
    @include translateX($to);
    }
    }
    .ninja {
    background: transparent url("../img/rope.png") no-repeat;
    background-size: $ninja-size;
    width: $ninja-size;
    height: ($ninja-size*2);
    @include animation (0, $dura, ninjamove, alternate, infinite);
    }
    CSS Animations: better with mixins

    View Slide

  179. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    NEAT.
    179
    That’s neat and all, but... really?

    View Slide

  180. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    180
    http://paulstamatiou.com/simplify
    CSS Animations: better example

    View Slide

  181. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    181
    CSS Animations: better example

    View Slide

  182. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    182
    CSS animation helpers
    http://daneden.me/animate/

    View Slide

  183. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    http://daneden.me/animate/
    http://thecssguru.freeiz.com/animate/
    https://github.com/ericam/compass-animate
    183
    Yes, still be lazy!

    View Slide

  184. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    WHEE!
    184
    Done with the good stuff. Back to serious now.

    View Slide

  185. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    MID-PROJECT?
    185
    How do I start with Sass mid-project?

    View Slide

  186. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    HAVE A PROCESS.
    186
    How do I start with Sass mid-project?

    View Slide

  187. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    187
    Sass mid-project: have a process.
    https://developers.google.com/speed/docs/best-practices/payload
    REMOVE UNUSED CSS
    MINIFY CSS
    SERVE SCALED IMAGES
    OPTIMIZE IMAGES

    View Slide

  188. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    188
    Sass mid-project: have a process.
    https://developers.google.com/speed/docs/best-practices/payload
    REMOVE UNUSED CSS
    MINIFY CSS
    SERVE SCALED IMAGES
    OPTIMIZE IMAGES
    GRUNT + CSSCSS

    View Slide

  189. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    189
    Sass mid-project: have a process.
    https://developers.google.com/speed/docs/best-practices/payload
    REMOVE UNUSED CSS
    MINIFY CSS
    SERVE SCALED IMAGES
    OPTIMIZE IMAGES
    compass compile --output-style compressed proj

    View Slide

  190. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    190
    Sass mid-project: have a process.
    https://developers.google.com/speed/docs/best-practices/payload
    REMOVE UNUSED CSS
    MINIFY CSS
    SERVE SCALED IMAGES
    OPTIMIZE IMAGES
    Sass with Media Queries

    View Slide

  191. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    191
    Sass mid-project: have a process.
    https://developers.google.com/speed/docs/best-practices/payload
    REMOVE UNUSED CSS
    MINIFY CSS
    SERVE SCALED IMAGES
    OPTIMIZE IMAGES
    GRUNT + IMAGEOPTIM

    View Slide

  192. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    START REFACTORING
    192
    Start to refactor

    View Slide

  193. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    PICK ONE.
    193
    Partials to organize the files

    View Slide

  194. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    _partials.scss
    194
    Partials to organize the files

    View Slide

  195. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    195
    // _colors.scss
    $color-brand: #3b5998;
    $color-action: #67a54b;
    $color-function: #f2f2f2;
    $color-alert: #b22727;
    // color variations
    $color-brand-light: lighten( $brand-color, 10% );
    $color-brand-lighter: lighten( $brand-color, 20% );
    $color-brand-dark: darken( $brand-color, 10% );
    $color-brand-darker: darken( $brand-color, 20% );
    ...
    Partial file, an example

    View Slide

  196. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    196
    // main.scss
    @import ‘colors’;
    Partial file being included and compiled

    View Slide

  197. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    197
    Organizing CSS

    View Slide

  198. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    198
    BASE
    LAYOUT
    MODULE
    STATE
    THEME
    Organizing CSS: SMACSS principles

    View Slide

  199. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    199
    scss/
    _base.scss
    modules/
    _buttons.scss
    _forms.scss
    _typography.scss
    layouts/
    _layout-full.scss
    _layout-small.scss
    main.scss
    Organizing CSS: SMACSS layouts with partials

    View Slide

  200. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    200
    // main.scss
    @import 'base';
    @import 'modules/forms';
    @import 'modules/typography';
    @import 'modules/buttons';
    @import 'layouts'
    ...
    Organizing CSS: SMACSS layouts with partials

    View Slide

  201. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    201
    http://wildbit.com/blog/2012/04/16/refactoring-14000-lines-of-css-into-sass/
    Organizing CSS: Real world example

    View Slide

  202. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    CHAT WITH ME:
    [email protected] • @kitt
    http://ki.tt/rpdx
    202
    Let me know if I can help!

    View Slide

  203. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    SUPPORT SASS
    AND COMPASS
    203
    Support Compass and Sass
    http://umdf.org/compass

    View Slide

  204. Lazy Dev’s Sass Dash • Kitt Hodsden • @kitt • http://ki.tt/rpdx • Refresh PDX 2013
    THANKS!
    204

    View Slide