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

Sass Why for the CSS Guy

Beau Smith
April 06, 2012

Sass Why for the CSS Guy

An intro to Sass and Compass for CSS fans. From @Beau Smith, front end tech lead at @Square.

Previously posted to: http://www.slideshare.net/beausmith/sass-why-for-the-css-guy-9475297

Beau Smith

April 06, 2012
Tweet

More Decks by Beau Smith

Other Decks in Design

Transcript

  1. Sass Why
    for the CSS Guy
    An intro to Sass for CSS fans

    View full-size slide

  2. CSS
    IS
    AWESOME

    View full-size slide

  3. CSS
    IS
    AWESOME
    via stevenf.com

    View full-size slide

  4. Syntactically

    View full-size slide

  5. Syntactically
    Awesome

    View full-size slide

  6. Syntactically
    Awesome
    Style

    View full-size slide

  7. Syntactically
    Awesome
    Style
    Sheets

    View full-size slide

  8. • CSS meta-language
    Sass

    View full-size slide

  9. • CSS meta-language
    • Simpler, more elegant syntax for CSS
    Sass

    View full-size slide

  10. • CSS meta-language
    • Simpler, more elegant syntax for CSS
    • Helps to create manageable stylesheets
    Sass

    View full-size slide

  11. • CSS meta-language
    • Simpler, more elegant syntax for CSS
    • Helps to create manageable stylesheets
    • An upgrade to CSS
    Sass

    View full-size slide

  12. • CSS meta-language
    • Simpler, more elegant syntax for CSS
    • Helps to create manageable stylesheets
    • An upgrade to CSS
    Sass makes CSS fun again.
    Sass

    View full-size slide

  13. • CSS meta-language
    • Simpler, more elegant syntax for CSS
    • Helps to create manageable stylesheets
    • An upgrade to CSS
    Sass makes CSS fun again.
    Sass Two delicious flavors
    Sass & SCSS

    View full-size slide

  14. • CSS authoring framework built in Sass

    View full-size slide

  15. • CSS authoring framework built in Sass
    • Collection of Sass mixins and functions

    View full-size slide

  16. • CSS authoring framework built in Sass
    • Collection of Sass mixins and functions
    • Library of the web’s most reusable CSS patterns

    View full-size slide

  17. • CSS authoring framework built in Sass
    • Collection of Sass mixins and functions
    • Library of the web’s most reusable CSS patterns
    • Makes CSS3 easy

    View full-size slide

  18. Two delicous flavors…

    View full-size slide

  19. Sass and SCSS
    Two delicous flavors…

    View full-size slide

  20. Sass and SCSS
    Two delicous flavors…

    View full-size slide

  21. • both functionally equivalent
    Sass and SCSS
    Two delicous flavors…

    View full-size slide

  22. • both functionally equivalent
    • both support the same feature set
    Sass and SCSS
    Two delicous flavors…

    View full-size slide

  23. • both functionally equivalent
    • both support the same feature set
    • neither will be deprecated
    Sass and SCSS
    Two delicous flavors…

    View full-size slide

  24. • both functionally equivalent
    • both support the same feature set
    • neither will be deprecated
    • SCSS is not a successor to Sass
    Sass and SCSS
    Two delicous flavors…

    View full-size slide

  25. • both functionally equivalent
    • both support the same feature set
    • neither will be deprecated
    • SCSS is not a successor to Sass
    • each make different people happy
    Sass and SCSS
    Two delicous flavors…

    View full-size slide

  26. • both functionally equivalent
    • both support the same feature set
    • neither will be deprecated
    • SCSS is not a successor to Sass
    • each make different people happy
    • some people like both
    Sass and SCSS
    Two delicous flavors…

    View full-size slide

  27. CSS
    nav {
    background: #ccc;
    width: 500px;
    margin: 10px auto;
    }
    nav a {
    float: left;
    padding: 0 5px;
    color: #666;
    }
    nav a:hover {
    color: #000;
    }

    View full-size slide

  28. CSS SCSS
    nav {
    background: #ccc;
    width: 500px;
    margin: 10px auto;
    a {
    float: left;
    padding: 0 5px;
    color: #666;
    &:hover {
    color: #000;
    }
    }
    }
    nav {
    background: #ccc;
    width: 500px;
    margin: 10px auto;
    }
    nav a {
    float: left;
    padding: 0 5px;
    color: #666;
    }
    nav a:hover {
    color: #000;
    }

    View full-size slide

  29. CSS SCSS
    nesting
    nav {
    background: #ccc;
    width: 500px;
    margin: 10px auto;
    a {
    float: left;
    padding: 0 5px;
    color: #666;
    &:hover {
    color: #000;
    }
    }
    }
    nav {
    background: #ccc;
    width: 500px;
    margin: 10px auto;
    }
    nav a {
    float: left;
    padding: 0 5px;
    color: #666;
    }
    nav a:hover {
    color: #000;
    }

    View full-size slide

  30. CSS SCSS
    nesting
    nav {
    background: #ccc;
    width: 500px;
    margin: 10px auto;
    a {
    float: left;
    padding: 0 5px;
    color: #666;
    &:hover {
    color: #000;
    }
    }
    }
    nav {
    background: #ccc;
    width: 500px;
    margin: 10px auto;
    }
    nav a {
    float: left;
    padding: 0 5px;
    color: #666;
    }
    nav a:hover {
    color: #000;
    }

    View full-size slide

  31. CSS SCSS
    nesting
    nav {
    background: #ccc;
    width: 500px;
    margin: 10px auto;
    a {
    float: left;
    padding: 0 5px;
    color: #666;
    &:hover {
    color: #000;
    }
    }
    }
    nav {
    background: #ccc;
    width: 500px;
    margin: 10px auto;
    }
    nav a {
    float: left;
    padding: 0 5px;
    color: #666;
    }
    nav a:hover {
    color: #000;
    }

    View full-size slide

  32. CSS SCSS
    the parent selector
    nesting
    nav {
    background: #ccc;
    width: 500px;
    margin: 10px auto;
    a {
    float: left;
    padding: 0 5px;
    color: #666;
    &:hover {
    color: #000;
    }
    }
    }
    nav {
    background: #ccc;
    width: 500px;
    margin: 10px auto;
    }
    nav a {
    float: left;
    padding: 0 5px;
    color: #666;
    }
    nav a:hover {
    color: #000;
    }

    View full-size slide

  33. CSS SCSS
    the parent selector
    nesting
    nav {
    background: #ccc;
    width: 500px;
    margin: 10px auto;
    a {
    float: left;
    padding: 0 5px;
    color: #666;
    &:hover {
    color: #000;
    }
    }
    }
    nav {
    background: #ccc;
    width: 500px;
    margin: 10px auto;
    }
    nav a {
    float: left;
    padding: 0 5px;
    color: #666;
    }
    nav a:hover {
    color: #000;
    }

    View full-size slide

  34. CSS SCSS
    nav {
    background: #ccc;
    width: 500px;
    margin: 10px auto;
    a {
    float: left;
    padding: 0 5px;
    color: #666;
    &:hover {
    color: #000;
    }
    }
    }
    nav {
    background: #ccc;
    width: 500px;
    margin: 10px auto;
    }
    nav a {
    float: left;
    padding: 0 5px;
    color: #666;
    }
    nav a:hover {
    color: #000;
    }

    View full-size slide

  35. CSS
    nav { width: 500px; margin: 10px auto;
    background: #ccc;
    a { float: left; display: block; padding: 0 5px;
    color: #666;
    &:hover { color: #000; }}}
    SCSS
    SCSS doesn’t care about whitespace
    nav {
    background: #ccc;
    width: 500px;
    margin: 10px auto;
    a {
    float: left;
    padding: 0 5px;
    color: #666;
    &:hover {
    color: #000;
    }
    }
    }
    nav {
    background: #ccc;
    width: 500px;
    margin: 10px auto;
    }
    nav a {
    float: left;
    padding: 0 5px;
    color: #666;
    }
    nav a:hover {
    color: #000;
    }

    View full-size slide

  36. CSS SCSS
    nav {
    background: #ccc;
    width: 500px;
    margin: 10px auto;
    a {
    float: left;
    padding: 0 5px;
    color: #666;
    &:hover {
    color: #000;
    }
    }
    }
    nav {
    background: #ccc;
    width: 500px;
    margin: 10px auto;
    }
    nav a {
    float: left;
    padding: 0 5px;
    color: #666;
    }
    nav a:hover {
    color: #000;
    }

    View full-size slide

  37. CSS SCSS Sass
    nav
    background: #ccc
    width: 500px
    margin: 10px auto
    a
    float: left
    padding: 0 5px
    color: #666
    &:hover
    color: #000
    nav {
    background: #ccc;
    width: 500px;
    margin: 10px auto;
    a {
    float: left;
    padding: 0 5px;
    color: #666;
    &:hover {
    color: #000;
    }
    }
    }
    nav {
    background: #ccc;
    width: 500px;
    margin: 10px auto;
    }
    nav a {
    float: left;
    padding: 0 5px;
    color: #666;
    }
    nav a:hover {
    color: #000;
    }

    View full-size slide

  38. CSS SCSS Sass
    nav
    background: #ccc
    width: 500px
    margin: 10px auto
    a
    float: left
    padding: 0 5px
    color: #666
    &:hover
    color: #000
    nav {
    background: #ccc;
    width: 500px;
    margin: 10px auto;
    a {
    float: left;
    padding: 0 5px;
    color: #666;
    &:hover {
    color: #000;
    }
    }
    }
    nav {
    background: #ccc;
    width: 500px;
    margin: 10px auto;
    }
    nav a {
    float: left;
    padding: 0 5px;
    color: #666;
    }
    nav a:hover {
    color: #000;
    }
    whitespace is important

    View full-size slide

  39. CSS SCSS Sass
    nav
    background: #ccc
    width: 500px
    margin: 10px auto
    a
    float: left
    padding: 0 5px
    color: #666
    &:hover
    color: #000
    nav {
    background: #ccc;
    width: 500px;
    margin: 10px auto;
    a {
    float: left;
    padding: 0 5px;
    color: #666;
    &:hover {
    color: #000;
    }
    }
    }
    nav {
    background: #ccc;
    width: 500px;
    margin: 10px auto;
    }
    nav a {
    float: left;
    padding: 0 5px;
    color: #666;
    }
    nav a:hover {
    color: #000;
    }

    View full-size slide

  40. CSS SCSS Sass
    nav
    background: #ccc
    width: 500px
    margin: 10px auto
    a
    float: left
    padding: 0 5px
    color: #666
    &:hover
    color: #000
    nav {
    background: #ccc;
    width: 500px;
    margin: 10px auto;
    a {
    float: left;
    padding: 0 5px;
    color: #666;
    &:hover {
    color: #000;
    }
    }
    }
    nav {
    background: #ccc;
    width: 500px;
    margin: 10px auto;
    }
    nav a {
    float: left;
    padding: 0 5px;
    color: #666;
    }
    nav a:hover {
    color: #000;
    }

    View full-size slide

  41. CSS SCSS Sass
    nav
    background: #ccc
    width: 500px
    margin: 10px auto
    a
    float: left
    padding: 0 5px
    color: #666
    &:hover
    color: #000
    nav {
    background: #ccc;
    width: 500px;
    margin: 10px auto;
    a {
    float: left;
    padding: 0 5px;
    color: #666;
    &:hover {
    color: #000;
    }
    }
    }
    nav {
    background: #ccc;
    width: 500px;
    margin: 10px auto;
    }
    nav a {
    float: left;
    padding: 0 5px;
    color: #666;
    }
    nav a:hover {
    color: #000;
    }

    View full-size slide

  42. SCSS Sass
    Advantages of each…

    View full-size slide

  43. • the “newer” syntax
    SCSS Sass
    Advantages of each…

    View full-size slide

  44. • the “newer” syntax
    • a super set of CSS
    SCSS Sass
    Advantages of each…

    View full-size slide

  45. • the “newer” syntax
    • a super set of CSS
    • very similar to CSS
    SCSS Sass
    Advantages of each…

    View full-size slide

  46. • the “newer” syntax
    • a super set of CSS
    • very similar to CSS
    • low barrier to entry
    SCSS Sass
    Advantages of each…

    View full-size slide

  47. • the “newer” syntax
    • a super set of CSS
    • very similar to CSS
    • low barrier to entry
    • allows for single-line rules
    SCSS Sass
    Advantages of each…

    View full-size slide

  48. • the “newer” syntax
    • a super set of CSS
    • very similar to CSS
    • low barrier to entry
    • allows for single-line rules
    • more flexible for expression
    SCSS Sass
    Advantages of each…

    View full-size slide

  49. • the “newer” syntax
    • a super set of CSS
    • very similar to CSS
    • low barrier to entry
    • allows for single-line rules
    • more flexible for expression
    • compatible with many CSS parsers
    SCSS Sass
    Advantages of each…

    View full-size slide

  50. • the “newer” syntax
    • a super set of CSS
    • very similar to CSS
    • low barrier to entry
    • allows for single-line rules
    • more flexible for expression
    • compatible with many CSS parsers
    • easy to integrate with existing CSS
    SCSS Sass
    Advantages of each…

    View full-size slide

  51. • the “newer” syntax
    • a super set of CSS
    • very similar to CSS
    • low barrier to entry
    • allows for single-line rules
    • more flexible for expression
    • compatible with many CSS parsers
    • easy to integrate with existing CSS
    • DRY
    SCSS Sass
    Advantages of each…

    View full-size slide

  52. • the “newer” syntax
    • a super set of CSS
    • very similar to CSS
    • low barrier to entry
    • allows for single-line rules
    • more flexible for expression
    • compatible with many CSS parsers
    • easy to integrate with existing CSS
    • DRY
    • the “original” syntax
    SCSS Sass
    Advantages of each…

    View full-size slide

  53. • the “newer” syntax
    • a super set of CSS
    • very similar to CSS
    • low barrier to entry
    • allows for single-line rules
    • more flexible for expression
    • compatible with many CSS parsers
    • easy to integrate with existing CSS
    • DRY
    • the “original” syntax
    • no curly braces or semicolons
    SCSS Sass
    Advantages of each…

    View full-size slide

  54. • the “newer” syntax
    • a super set of CSS
    • very similar to CSS
    • low barrier to entry
    • allows for single-line rules
    • more flexible for expression
    • compatible with many CSS parsers
    • easy to integrate with existing CSS
    • DRY
    • the “original” syntax
    • no curly braces or semicolons
    • white-space aware
    SCSS Sass
    Advantages of each…

    View full-size slide

  55. • the “newer” syntax
    • a super set of CSS
    • very similar to CSS
    • low barrier to entry
    • allows for single-line rules
    • more flexible for expression
    • compatible with many CSS parsers
    • easy to integrate with existing CSS
    • DRY
    • the “original” syntax
    • no curly braces or semicolons
    • white-space aware
    • shortcuts for @mixin and @include
    SCSS Sass
    Advantages of each…

    View full-size slide

  56. • the “newer” syntax
    • a super set of CSS
    • very similar to CSS
    • low barrier to entry
    • allows for single-line rules
    • more flexible for expression
    • compatible with many CSS parsers
    • easy to integrate with existing CSS
    • DRY
    • the “original” syntax
    • no curly braces or semicolons
    • white-space aware
    • shortcuts for @mixin and @include
    • more scannable
    SCSS Sass
    Advantages of each…

    View full-size slide

  57. • the “newer” syntax
    • a super set of CSS
    • very similar to CSS
    • low barrier to entry
    • allows for single-line rules
    • more flexible for expression
    • compatible with many CSS parsers
    • easy to integrate with existing CSS
    • DRY
    • the “original” syntax
    • no curly braces or semicolons
    • white-space aware
    • shortcuts for @mixin and @include
    • more scannable
    • more concise, better for teams
    SCSS Sass
    Advantages of each…

    View full-size slide

  58. • the “newer” syntax
    • a super set of CSS
    • very similar to CSS
    • low barrier to entry
    • allows for single-line rules
    • more flexible for expression
    • compatible with many CSS parsers
    • easy to integrate with existing CSS
    • DRY
    • the “original” syntax
    • no curly braces or semicolons
    • white-space aware
    • shortcuts for @mixin and @include
    • more scannable
    • more concise, better for teams
    • enforces one declaration per line
    SCSS Sass
    Advantages of each…

    View full-size slide

  59. • the “newer” syntax
    • a super set of CSS
    • very similar to CSS
    • low barrier to entry
    • allows for single-line rules
    • more flexible for expression
    • compatible with many CSS parsers
    • easy to integrate with existing CSS
    • DRY
    • the “original” syntax
    • no curly braces or semicolons
    • white-space aware
    • shortcuts for @mixin and @include
    • more scannable
    • more concise, better for teams
    • enforces one declaration per line
    • cleaner merges
    SCSS Sass
    Advantages of each…

    View full-size slide

  60. • the “newer” syntax
    • a super set of CSS
    • very similar to CSS
    • low barrier to entry
    • allows for single-line rules
    • more flexible for expression
    • compatible with many CSS parsers
    • easy to integrate with existing CSS
    • DRY
    • the “original” syntax
    • no curly braces or semicolons
    • white-space aware
    • shortcuts for @mixin and @include
    • more scannable
    • more concise, better for teams
    • enforces one declaration per line
    • cleaner merges
    • DRY, arguably more so
    SCSS Sass
    Advantages of each…

    View full-size slide

  61. • the “newer” syntax
    • a super set of CSS
    • very similar to CSS
    • low barrier to entry
    • allows for single-line rules
    • more flexible for expression
    • compatible with many CSS parsers
    • easy to integrate with existing CSS
    • DRY
    • the “original” syntax
    • no curly braces or semicolons
    • white-space aware
    • shortcuts for @mixin and @include
    • more scannable
    • more concise, better for teams
    • enforces one declaration per line
    • cleaner merges
    • DRY, arguably more so
    SCSS Sass
    Try both …you may want to use both.
    Advantages of each…

    View full-size slide

  62. ~ sass-convert [input-file] [output-file]
    SCSS
    Sass

    View full-size slide

  63. ~ sass-convert [input-file] [output-file]
    SCSS
    Sass
    CSS

    View full-size slide

  64. • Add Compass to a project
    • @import & partials
    • @extend
    • nesting
    • $variables
    • @mixin
    • sprites
    • inline images
    • CSS3
    Today’s Roadmap

    View full-size slide

  65. Let’s refactor the messaging style sheet into Sass.
    Flash Messaging

    View full-size slide

  66. Let’s refactor the messaging style sheet into Sass.
    Flash Messaging

    View full-size slide





  67. Sass Why







    messaging.html

    View full-size slide



  68. You have mail.



    Settings updated!



    Please fix the following errors:

    Username requires more pazazz.
    Password is too easy to hack.
    You must be at least this tall to ride this ride.


    Our content…

    View full-size slide



  69. You have mail.



    Settings updated!



    Please fix the following errors:

    Username requires more pazazz.
    Password is too easy to hack.
    You must be at least this tall to ride this ride.


    Our content…
    info

    View full-size slide



  70. You have mail.



    Settings updated!



    Please fix the following errors:

    Username requires more pazazz.
    Password is too easy to hack.
    You must be at least this tall to ride this ride.


    Our content…
    success

    View full-size slide



  71. You have mail.



    Settings updated!



    Please fix the following errors:

    Username requires more pazazz.
    Password is too easy to hack.
    You must be at least this tall to ride this ride.


    Our content…
    error

    View full-size slide

  72. body {
    background: #e3e3e3;
    margin: 20px;
    font: 16px/24px sans-serif;
    }
    ul {
    list-style: disc;
    margin-left: 20px;
    }
    messaging.css

    View full-size slide

  73. body {
    background: #e3e3e3;
    margin: 20px;
    font: 16px/24px sans-serif;
    }
    ul {
    list-style: disc;
    margin-left: 20px;
    }
    messaging.css
    layout

    View full-size slide

  74. body {
    background: #e3e3e3;
    margin: 20px;
    font: 16px/24px sans-serif;
    }
    ul {
    list-style: disc;
    margin-left: 20px;
    }
    messaging.css
    prose

    View full-size slide

  75. .flash-info {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    background: #a4a4a4;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    text-shadow: 0 -1px #838484;
    }
    .flash-success {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    background: #1b942a;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    text-shadow: 0 -1px #1a7e1c;
    }
    .flash-error {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    background: #ef9000;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    text-shadow: 0 -1px #e8541c;
    }
    .flash-error li {
    font-weight: normal;
    }
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px;
    }
    messaging.css

    View full-size slide

  76. .flash-info {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    background: #a4a4a4;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    text-shadow: 0 -1px #838484;
    }
    .flash-success {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    background: #1b942a;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    text-shadow: 0 -1px #1a7e1c;
    }
    .flash-error {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    background: #ef9000;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    text-shadow: 0 -1px #e8541c;
    }
    .flash-error li {
    font-weight: normal;
    }
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px;
    }
    messaging.css
    info

    View full-size slide

  77. .flash-info {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    background: #a4a4a4;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    text-shadow: 0 -1px #838484;
    }
    .flash-success {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    background: #1b942a;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    text-shadow: 0 -1px #1a7e1c;
    }
    .flash-error {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    background: #ef9000;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    text-shadow: 0 -1px #e8541c;
    }
    .flash-error li {
    font-weight: normal;
    }
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px;
    }
    messaging.css
    success

    View full-size slide

  78. .flash-info {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    background: #a4a4a4;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    text-shadow: 0 -1px #838484;
    }
    .flash-success {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    background: #1b942a;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    text-shadow: 0 -1px #1a7e1c;
    }
    .flash-error {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    background: #ef9000;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    text-shadow: 0 -1px #e8541c;
    }
    .flash-error li {
    font-weight: normal;
    }
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px;
    }
    messaging.css error

    View full-size slide

  79. .flash-info {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    background: #a4a4a4;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    text-shadow: 0 -1px #838484;
    }
    .flash-success {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    background: #1b942a;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    text-shadow: 0 -1px #1a7e1c;
    }
    .flash-error {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    background: #ef9000;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    text-shadow: 0 -1px #e8541c;
    }
    .flash-error li {
    font-weight: normal;
    }
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px;
    }
    messaging.css
    error items

    View full-size slide

  80. .flash-info {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    background: #a4a4a4;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    text-shadow: 0 -1px #838484;
    }
    .flash-success {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    background: #1b942a;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    text-shadow: 0 -1px #1a7e1c;
    }
    .flash-error {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    background: #ef9000;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    text-shadow: 0 -1px #e8541c;
    }
    .flash-error li {
    font-weight: normal;
    }
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px;
    }
    messaging.css
    icon

    View full-size slide

  81. html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acron
    ym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt
    ,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoo
    t,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgr
    oup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:
    100%;font:inherit;vertical-align:baseline;margin:0;padding:0}body{line-height:1}
    ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}
    caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}
    q,blockquote{quotes:none}
    q:before,q:after,blockquote:before,blockquote:after{content:none}a img{border:none}
    article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{d
    isplay:block}
    reset.css

    View full-size slide

  82. html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acron
    ym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt
    ,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoo
    t,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgr
    oup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:
    100%;font:inherit;vertical-align:baseline;margin:0;padding:0}body{line-height:1}
    ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}
    caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}
    q,blockquote{quotes:none}
    q:before,q:after,blockquote:before,blockquote:after{content:none}a img{border:none}
    article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{d
    isplay:block}
    reset.css
    Eric Meyer’s Reset

    View full-size slide

  83. html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acron
    ym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt
    ,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoo
    t,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgr
    oup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:
    100%;font:inherit;vertical-align:baseline;margin:0;padding:0}body{line-height:1}
    ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}
    caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}
    q,blockquote{quotes:none}
    q:before,q:after,blockquote:before,blockquote:after{content:none}a img{border:none}
    article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{d
    isplay:block}
    reset.css
    Eric Meyer’s Reset
    • Browsers have a default style sheet

    View full-size slide

  84. html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acron
    ym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt
    ,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoo
    t,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgr
    oup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:
    100%;font:inherit;vertical-align:baseline;margin:0;padding:0}body{line-height:1}
    ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}
    caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}
    q,blockquote{quotes:none}
    q:before,q:after,blockquote:before,blockquote:after{content:none}a img{border:none}
    article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{d
    isplay:block}
    reset.css
    Eric Meyer’s Reset
    • Browsers have a default style sheet
    • Browser style sheets are different

    View full-size slide

  85. html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acron
    ym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt
    ,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoo
    t,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgr
    oup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:
    100%;font:inherit;vertical-align:baseline;margin:0;padding:0}body{line-height:1}
    ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}
    caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}
    q,blockquote{quotes:none}
    q:before,q:after,blockquote:before,blockquote:after{content:none}a img{border:none}
    article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{d
    isplay:block}
    reset.css
    Eric Meyer’s Reset
    • Browsers have a default style sheet
    • Browser style sheets are different
    • A reset style sheet overrides default browser styles

    View full-size slide

  86. Add Compass to project
    ~

    View full-size slide

  87. Add Compass to project
    ~
    ~/sass-why
    cd sass-why

    View full-size slide

  88. Add Compass to project
    ~
    ~/sass-why
    ~/sass-why
    cd sass-why
    compass create

    View full-size slide

  89. Add Compass to project

    View full-size slide

  90. Add Compass to project
    Compass configuration file

    View full-size slide

  91. Add Compass to project
    Compass configuration file

    View full-size slide

  92. Add Compass to project
    Sass files (SCSS syntax)

    View full-size slide

  93. Add Compass to project
    CSS compiled from Sass files

    View full-size slide

  94. Add Compass to project

    View full-size slide

  95. Add Compass to project

    View full-size slide

  96. Add Compass to project

    View full-size slide

  97. Add Compass to project

    View full-size slide

  98. Add Compass to project

    View full-size slide

  99. Add Compass to project
    ~
    ~/sass-why
    ~/sass-why
    cd sass-why
    compass create

    View full-size slide

  100. Add Compass to project
    ~
    ~/sass-why
    ~/sass-why
    cd sass-why
    compass create
    compass compile
    create stylesheets/messaging.css
    create stylesheets/reset.css
    ~/sass-why

    View full-size slide





  101. Sass Why




    •••
    •••
    •••


    messaging.html

    View full-size slide





  102. Sass Why




    •••
    •••
    •••


    messaging.html
    update links

    View full-size slide





  103. Sass Why




    •••
    •••
    •••


    messaging.html
    update links

    View full-size slide

  104. Let’s abstract a little more.

    View full-size slide

  105. @import (in Sass)

    View full-size slide

  106. • not during page render in browser like in CSS
    @import (in Sass)

    View full-size slide

  107. • not during page render in browser like in CSS
    • when compiling Sass to CSS
    @import (in Sass)

    View full-size slide

  108. • not during page render in browser like in CSS
    • when compiling Sass to CSS
    • organize your styles into logical partials
    @import (in Sass)

    View full-size slide

  109. • not during page render in browser like in CSS
    • when compiling Sass to CSS
    • organize your styles into logical partials
    • combine many files into one
    @import (in Sass)

    View full-size slide

  110. • not during page render in browser like in CSS
    • when compiling Sass to CSS
    • organize your styles into logical partials
    • combine many files into one
    • serve fewer css files per request
    @import (in Sass)

    View full-size slide





  111. Sass Why




    •••
    •••
    •••


    messaging.html

    View full-size slide





  112. Sass Why




    •••
    •••
    •••


    messaging.html
    remove these

    View full-size slide





  113. Sass Why



    •••
    •••
    •••


    messaging.html
    add screen.css

    View full-size slide

  114. Remove reset and compiled css

    View full-size slide

  115. rename to screen.scss

    View full-size slide

  116. rename to screen.scss

    View full-size slide

  117. create two partials

    View full-size slide

  118. create two partials

    View full-size slide

  119. body {
    background: #e3e3e3;
    margin: 20px;
    font: 16px/24px sans-serif;
    }
    ul {
    list-style: disc;
    margin-left: 20px;
    }
    _layout.scss
    layout
    prose

    View full-size slide

  120. _messaging.scss
    .flash-info {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    background: #a4a4a4;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    text-shadow: 0 -1px #838484;
    }
    .flash-success {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    background: #1b942a;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    text-shadow: 0 -1px #1a7e1c;
    }
    .flash-error {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    background: #ef9000;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    text-shadow: 0 -1px #e8541c;
    }
    .flash-error li {
    font-weight: normal;
    }
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px;
    }

    View full-size slide

  121. @import "layout";
    screen.scss

    View full-size slide

  122. @import "layout";
    @import "messaging";
    screen.scss

    View full-size slide

  123. @import "layout";
    @import "messaging";
    screen.scss
    @import "compass/reset";

    View full-size slide

  124. @import "layout";
    @import "messaging";
    screen.scss
    @import "compass/reset";
    Let’s compile

    View full-size slide

  125. @import "layout";
    @import "messaging";
    screen.scss
    @import "compass/reset";
    Compass doesn’t compile partials

    View full-size slide

  126. When one element should have all the styles of another,
    plus its own styles.
    @extend

    View full-size slide

  127. _messaging.scss
    .flash-info {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    background: #a4a4a4;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    text-shadow: 0 -1px #838484;
    }
    .flash-success {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    background: #1b942a;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    text-shadow: 0 -1px #1a7e1c;
    }
    .flash-error {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    background: #ef9000;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    text-shadow: 0 -1px #e8541c;
    }
    .flash-error li {
    font-weight: normal;
    }
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px;
    }

    View full-size slide

  128. _messaging.scss
    .flash-info {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    background: #a4a4a4;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    text-shadow: 0 -1px #838484;
    }
    .flash-success {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    background: #1b942a;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    text-shadow: 0 -1px #1a7e1c;
    }
    .flash-error {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    background: #ef9000;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    text-shadow: 0 -1px #e8541c;
    }
    .flash-error li {
    font-weight: normal;
    }
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px;
    }
    unique style declarations

    View full-size slide

  129. _messaging.scss
    .flash-info,
    .flash-success,
    .flash-error {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    }
    .flash-info {
    background: #a4a4a4;
    text-shadow: 0 -1px #838484;
    }
    .flash-success {
    background: #1b942a;
    text-shadow: 0 -1px #1a7e1c;
    }
    .flash-error {
    background: #ef9000;
    text-shadow: 0 -1px #e8541c;
    }
    .flash-error li {
    font-weight: normal;
    }
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px;
    }

    View full-size slide

  130. _messaging.scss
    .flash-info,
    .flash-success,
    .flash-error {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    }
    .flash-info {
    background: #a4a4a4;
    text-shadow: 0 -1px #838484;
    }
    .flash-success {
    background: #1b942a;
    text-shadow: 0 -1px #1a7e1c;
    }
    .flash-error {
    background: #ef9000;
    text-shadow: 0 -1px #e8541c;
    }
    .flash-error li {
    font-weight: normal;
    }
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px;
    }

    View full-size slide

  131. _messaging.scss
    .flash-message {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    }
    .flash-info {
    background: #a4a4a4;
    text-shadow: 0 -1px #838484;
    }
    .flash-success {
    background: #1b942a;
    text-shadow: 0 -1px #1a7e1c;
    }
    .flash-error {
    background: #ef9000;
    text-shadow: 0 -1px #e8541c;
    }
    .flash-error li {
    font-weight: normal;
    }
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px;
    }

    View full-size slide

  132. _messaging.scss
    .flash-message {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    }
    .flash-info {
    background: #a4a4a4;
    text-shadow: 0 -1px #838484;
    }
    .flash-success {
    background: #1b942a;
    text-shadow: 0 -1px #1a7e1c;
    }
    .flash-error {
    background: #ef9000;
    text-shadow: 0 -1px #e8541c;
    }
    .flash-error li {
    font-weight: normal;
    }
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px;
    }

    View full-size slide

  133. _messaging.scss
    .flash-message {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    }
    .flash-info {
    @extend .flash-message;
    background: #a4a4a4;
    text-shadow: 0 -1px #838484;
    }
    .flash-success {
    @extend .flash-message;
    background: #1b942a;
    text-shadow: 0 -1px #1a7e1c;
    }
    .flash-error {
    @extend .flash-message;
    background: #ef9000;
    text-shadow: 0 -1px #e8541c;
    }
    .flash-error li {
    font-weight: normal;
    }
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px;
    }

    View full-size slide

  134. _messaging.scss
    .flash-message {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    }
    .flash-info {
    @extend .flash-message;
    background: #a4a4a4;
    text-shadow: 0 -1px #838484;
    }
    .flash-success {
    @extend .flash-message;
    background: #1b942a;
    text-shadow: 0 -1px #1a7e1c;
    }
    .flash-error {
    @extend .flash-message;
    background: #ef9000;
    text-shadow: 0 -1px #e8541c;
    }
    .flash-error li {
    font-weight: normal;
    }
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px;
    }

    View full-size slide

  135. .flash-message,
    .flash-info,
    .flash-success,
    .flash-error {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    }
    .flash-info {
    background: #a4a4a4;
    text-shadow: 0 -1px #838484;
    }
    .flash-success {
    background: #1b942a;
    text-shadow: 0 -1px #1a7e1c;
    }
    .flash-error {
    background: #ef9000;
    text-shadow: 0 -1px #e8541c;
    }
    .flash-error li {
    font-weight: normal;
    }
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px;
    }
    Compiled CSS

    View full-size slide

  136. _messaging.scss
    .flash-info {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    background: #a4a4a4;
    text-shadow: 0 -1px #838484;
    }
    .flash-success {
    @extend .flash-info;
    background: #1b942a;
    text-shadow: 0 -1px #1a7e1c;
    }
    .flash-error {
    @extend .flash-info;
    background: #ef9000;
    text-shadow: 0 -1px #e8541c;
    }
    .flash-error li {
    font-weight: normal;
    }
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px;
    }

    View full-size slide

  137. _messaging.scss
    .flash-info {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    background: #a4a4a4;
    text-shadow: 0 -1px #838484;
    }
    .flash-success {
    @extend .flash-info;
    background: #1b942a;
    text-shadow: 0 -1px #1a7e1c;
    }
    .flash-error {
    @extend .flash-info;
    background: #ef9000;
    text-shadow: 0 -1px #e8541c;
    }
    .flash-error li {
    font-weight: normal;
    }
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px;
    }

    View full-size slide

  138. _messaging.scss
    .flash-info {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    background: #a4a4a4;
    text-shadow: 0 -1px #838484;
    }
    .flash-success {
    @extend .flash-info;
    background: #1b942a;
    text-shadow: 0 -1px #1a7e1c;
    }
    .flash-error {
    @extend .flash-info;
    background: #ef9000;
    text-shadow: 0 -1px #e8541c;
    }
    .flash-error li {
    font-weight: normal;
    }
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px;
    }

    View full-size slide

  139. _messaging.scss
    .flash-info {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    background: #a4a4a4;
    text-shadow: 0 -1px #838484;
    }
    .flash-success {
    @extend .flash-info;
    background: #1b942a;
    text-shadow: 0 -1px #1a7e1c;
    }
    .flash-error {
    @extend .flash-info;
    background: #ef9000;
    text-shadow: 0 -1px #e8541c;
    }
    .flash-error li {
    font-weight: normal;
    }
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px;
    }

    View full-size slide

  140. _messaging.scss
    .flash-info {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    background: #a4a4a4;
    text-shadow: 0 -1px #838484;
    }
    .flash-success {
    @extend .flash-info;
    background: #1b942a;
    text-shadow: 0 -1px #1a7e1c;
    }
    .flash-error {
    @extend .flash-info;
    background: #ef9000;
    text-shadow: 0 -1px #e8541c;
    }
    .flash-error li {
    font-weight: normal;
    }
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px;
    }

    View full-size slide

  141. .flash-info,
    .flash-success,
    .flash-error {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    background: #a4a4a4;
    text-shadow: 0 -1px #838484;
    }
    .flash-success {
    background: #1b942a;
    text-shadow: 0 -1px #1a7e1c;
    }
    .flash-error {
    background: #ef9000;
    text-shadow: 0 -1px #e8541c;
    }
    .flash-error li {
    font-weight: normal;
    }
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px;
    }
    Compiled CSS

    View full-size slide

  142. • group styles together
    Nesting

    View full-size slide

  143. • group styles together
    • avoid duplication of selectors
    Nesting

    View full-size slide

  144. • group styles together
    • avoid duplication of selectors
    • keep your code DRY
    Nesting

    View full-size slide

  145. • group styles together
    • avoid duplication of selectors
    • keep your code DRY
    Sass nesting ≠ html structure
    Nesting

    View full-size slide

  146. • group styles together
    • avoid duplication of selectors
    • keep your code DRY
    Sass nesting ≠ html structure
    Nesting FASTER
    TRAFFIC
    KEEP
    LEFT

    View full-size slide

  147. Warning about Nesting

    View full-size slide

  148. Warning about Nesting
    .subset-section
    background-color: #FFF
    width: 960px
    .subset-skus
    width: 790px
    .subset-selection
    float: left
    width: 790px
    .registrant-needs
    margin-bottom: 10px
    text-align: right
    .subset-attributes
    width: 430px
    float: left
    .subset-pricing
    display: block
    text-align: right
    .price-special
    font-size: 11px
    .currency
    font-size: 16px

    View full-size slide

  149. Warning about Nesting
    .subset-section {
    background-color: white;
    width: 960px; }
    .subset-section .subset-skus {
    width: 790px; }
    .subset-section .subset-skus .subset-selection {
    float: left;
    width: 790px; }
    .subset-section .subset-skus .subset-selection .registrant-needs {
    margin-bottom: 10px;
    text-align: right; }
    .subset-section .subset-skus .subset-selection .registrant-needs .subset-attributes {
    width: 430px;
    float: left; }
    .subset-section .subset-skus .subset-selection .registrant-needs .subset-attributes .subset-pricing
    display: block;
    text-align: right; }
    .subset-section .subset-skus .subset-selection .registrant-needs .subset-attributes .subset-prici
    font-size: 11px; }
    .subset-section .subset-skus .subset-selection .registrant-needs .subset-attributes .subset-prici
    font-size: 16px; }

    View full-size slide

  150. _messaging.scss
    .flash-message {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    }
    .flash-info {
    @extend .flash-message;
    background: #a4a4a4;
    text-shadow: 0 -1px #838484;
    }
    .flash-success {
    @extend .flash-message;
    background: #1b942a;
    text-shadow: 0 -1px #1a7e1c;
    }
    .flash-error {
    @extend .flash-message;
    background: #ef9000;
    text-shadow: 0 -1px #e8541c;
    }
    .flash-error li {
    font-weight: normal;
    }
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px;
    }

    View full-size slide

  151. _messaging.scss
    .flash-message {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    }
    .flash-info {
    @extend .flash-message;
    background: #a4a4a4;
    text-shadow: 0 -1px #838484;
    }
    .flash-success {
    @extend .flash-message;
    background: #1b942a;
    text-shadow: 0 -1px #1a7e1c;
    }
    .flash-error {
    @extend .flash-message;
    background: #ef9000;
    text-shadow: 0 -1px #e8541c;
    }
    .flash-error li {
    font-weight: normal;
    }
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px;
    }

    View full-size slide

  152. _messaging.scss
    .flash-message {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    }
    .flash-info {
    @extend .flash-message;
    background: #a4a4a4;
    text-shadow: 0 -1px #838484;
    }
    .flash-success {
    @extend .flash-message;
    background: #1b942a;
    text-shadow: 0 -1px #1a7e1c;
    }
    .flash-error {
    @extend .flash-message;
    background: #ef9000;
    text-shadow: 0 -1px #e8541c;
    .flash-error li {
    font-weight: normal;
    }
    }
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px;
    }

    View full-size slide

  153. _messaging.scss
    .flash-message {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    }
    .flash-info {
    @extend .flash-message;
    background: #a4a4a4;
    text-shadow: 0 -1px #838484;
    }
    .flash-success {
    @extend .flash-message;
    background: #1b942a;
    text-shadow: 0 -1px #1a7e1c;
    }
    .flash-error {
    @extend .flash-message;
    background: #ef9000;
    text-shadow: 0 -1px #e8541c;
    .flash-error li {
    font-weight: normal;
    }
    }
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px;
    }

    View full-size slide

  154. _messaging.scss
    .flash-message {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    }
    .flash-info {
    @extend .flash-message;
    background: #a4a4a4;
    text-shadow: 0 -1px #838484;
    }
    .flash-success {
    @extend .flash-message;
    background: #1b942a;
    text-shadow: 0 -1px #1a7e1c;
    }
    .flash-error {
    @extend .flash-message;
    background: #ef9000;
    text-shadow: 0 -1px #e8541c;
    li {
    font-weight: normal;
    }
    }
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px;
    }

    View full-size slide

  155. screen.css
    .flash-message, .flash-info, .flash-success, .flash-error {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold; }
    .flash-info {
    background: #a4a4a4;
    text-shadow: 0 -1px #838484; }
    .flash-success {
    background: #1b942a;
    text-shadow: 0 -1px #1a7e1c; }
    .flash-error {
    background: #ef9000;
    text-shadow: 0 -1px #e8541c; }
    .flash-error li {
    font-weight: normal; }
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px; }

    View full-size slide

  156. screen.css
    .flash-message, .flash-info, .flash-success, .flash-error {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold; }
    .flash-info {
    background: #a4a4a4;
    text-shadow: 0 -1px #838484; }
    .flash-success {
    background: #1b942a;
    text-shadow: 0 -1px #1a7e1c; }
    .flash-error {
    background: #ef9000;
    text-shadow: 0 -1px #e8541c; }
    .flash-error li {
    font-weight: normal; } output_style = :nested
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px; }

    View full-size slide

  157. screen.css
    .flash-message, .flash-info, .flash-success, .flash-error {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold; }
    .flash-info {
    background: #a4a4a4;
    text-shadow: 0 -1px #838484; }
    .flash-success {
    background: #1b942a;
    text-shadow: 0 -1px #1a7e1c; }
    .flash-error {
    background: #ef9000;
    text-shadow: 0 -1px #e8541c; }
    .flash-error li {
    font-weight: normal; } output_style = :nested
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px; }

    View full-size slide

  158. screen.css
    .flash-message, .flash-info, .flash-success, .flash-error {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold; }
    .flash-info {
    background: #a4a4a4;
    text-shadow: 0 -1px #838484; }
    .flash-success {
    background: #1b942a;
    text-shadow: 0 -1px #1a7e1c; }
    .flash-error {
    background: #ef9000;
    text-shadow: 0 -1px #e8541c; }
    .flash-error li {
    font-weight: normal; } output_style = :nested
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px; }
    output_style

    View full-size slide

  159. screen.css
    .flash-message, .flash-info, .flash-success, .flash-error {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    }
    .flash-info {
    background: #a4a4a4;
    text-shadow: 0 -1px #838484;
    }
    .flash-success {
    background: #1b942a;
    text-shadow: 0 -1px #1a7e1c;
    }
    .flash-error {
    background: #ef9000;
    text-shadow: 0 -1px #e8541c;
    }
    .flash-error li {
    font-weight: normal;
    }
    output_style = :expanded
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px;
    }

    View full-size slide

  160. screen.css
    .flash-message, .flash-info, .flash-success, .flash-error { position: relative; margin: 0 auto 15px;
    width: 435px; border-radius: 5px; padding: 10px 50px 10px 15px; color: white; font-weight: bold; }
    .flash-info { background: #a4a4a4; text-shadow: 0 -1px #838484; }
    .flash-success { background: #1b942a; text-shadow: 0 -1px #1a7e1c; }
    .flash-error { background: #ef9000; text-shadow: 0 -1px #e8541c; }
    .flash-error li { font-weight: normal; }
    .flash-icon { display: block; position: absolute; top: 11px; right: 12px; }
    output_style = :compact

    View full-size slide

  161. screen.css
    .flash-message,.flash-info,.flash-success,.flash-error{position:relative;margin:0 auto 15px;width:
    435px;border-radius:5px;padding:10px 50px 10px 15px;color:white;font-weight:bold}.flash-
    info{background:#a4a4a4;text-shadow:0 -1px #838484}.flash-success{background:#1b942a;text-shadow:0
    -1px #1a7e1c}.flash-error{background:#ef9000;text-shadow:0 -1px #e8541c}.flash-error li{font-
    weight:normal}.flash-icon{display:block;position:absolute;top:11px;right:12px}
    output_style = :compressed

    View full-size slide

  162. SCSS to Sass

    View full-size slide

  163. _messaging.scss
    .flash-message {
    position: relative;
    margin: 0 auto 15px;
    width: 435px;
    border-radius: 5px;
    padding: 10px 50px 10px 15px;
    color: white;
    font-weight: bold;
    }
    .flash-info {
    @extend .flash-message;
    background: #a4a4a4;
    text-shadow: 0 -1px #838484;
    }
    .flash-success {
    @extend .flash-message;
    background: #1b942a;
    text-shadow: 0 -1px #1a7e1c;
    }
    .flash-error {
    @extend .flash-message;
    background: #ef9000;
    text-shadow: 0 -1px #e8541c;
    li {
    font-weight: normal;
    }
    }
    .flash-icon {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px;
    }

    View full-size slide

  164. _messaging.sass
    .flash-message
    position: relative
    margin: 0 auto 15px;
    width: 435px;
    border-radius: 5px
    padding: 10px 50px 10px 15px
    color: white
    font-weight: bold
    .flash-info
    @extend .flash-message
    background: #a4a4a4
    text-shadow: 0 -1px #838484
    .flash-success
    @extend .flash-message
    background: #1b942a
    text-shadow: 0 -1px #1a7e1c
    .flash-error
    @extend .flash-message
    background: #ef9000
    text-shadow: 0 -1px #e8541c
    li
    font-weight: normal
    .flash-icon
    display: block
    position: absolute
    top: 11px
    right: 12px

    View full-size slide

  165. _messaging.sass
    .flash-message
    position: relative
    margin: 0 auto 15px;
    width: 435px;
    border-radius: 5px
    padding: 10px 50px 10px 15px
    color: white
    font-weight: bold
    .flash-info
    @extend .flash-message
    background: #a4a4a4
    text-shadow: 0 -1px #838484
    .flash-success
    @extend .flash-message
    background: #1b942a
    text-shadow: 0 -1px #1a7e1c
    .flash-error
    @extend .flash-message
    background: #ef9000
    text-shadow: 0 -1px #e8541c
    li
    font-weight: normal
    .flash-icon
    display: block
    position: absolute
    top: 11px
    right: 12px

    View full-size slide

  166. @import "compass/reset";
    @import "layout";
    @import "messaging";
    screen.scss

    View full-size slide

  167. @import "compass/reset";
    @import "layout";
    @import "messaging";
    screen.scss
    @import supports both syntaxes, no changes here

    View full-size slide

  168. @import compass/reset
    @import layout
    @import messaging
    screen.sass

    View full-size slide

  169. @import compass/reset
    @import layout
    @import messaging
    screen.sass
    semicolons removed, quotes optional

    View full-size slide

  170. • containers for values
    $variables

    View full-size slide

  171. • containers for values
    • variable name define the purpose of values
    $variables

    View full-size slide

  172. • containers for values
    • variable name define the purpose of values
    • Five value types in Sass:
    $variables

    View full-size slide

  173. • containers for values
    • variable name define the purpose of values
    • Five value types in Sass:
    • numbers: 5, 8.2, 99%, 20px
    $variables

    View full-size slide

  174. • containers for values
    • variable name define the purpose of values
    • Five value types in Sass:
    • numbers: 5, 8.2, 99%, 20px
    • text strings: foo bar, “baz qux”
    $variables

    View full-size slide

  175. • containers for values
    • variable name define the purpose of values
    • Five value types in Sass:
    • numbers: 5, 8.2, 99%, 20px
    • text strings: foo bar, “baz qux”
    • colors: #38e1b2, rgba(0, 128, 255, 0.3)
    $variables

    View full-size slide

  176. • containers for values
    • variable name define the purpose of values
    • Five value types in Sass:
    • numbers: 5, 8.2, 99%, 20px
    • text strings: foo bar, “baz qux”
    • colors: #38e1b2, rgba(0, 128, 255, 0.3)
    • booleans: true or false
    $variables

    View full-size slide

  177. • containers for values
    • variable name define the purpose of values
    • Five value types in Sass:
    • numbers: 5, 8.2, 99%, 20px
    • text strings: foo bar, “baz qux”
    • colors: #38e1b2, rgba(0, 128, 255, 0.3)
    • booleans: true or false
    • lists: 2px 10px 15px or Arial, Helvetica, Courier
    $variables

    View full-size slide

  178. _messaging.sass
    .flash-message
    position: relative
    margin: 0 auto 15px
    width: 435px
    border-radius: 5px
    padding: 10px 50px 10px 15px
    color: white
    font-weight: bold
    .flash-info
    @extend .flash-message
    background: #a4a4a4
    text-shadow: 0 -1px #838484
    .flash-success
    @extend .flash-message
    background: #1b942a
    text-shadow: 0 -1px #1a7e1c
    .flash-error
    @extend .flash-message
    background: #ef9000
    text-shadow: 0 -1px #e8541c
    li
    font-weight: normal
    .flash-icon
    display: block
    position: absolute
    top: 11px
    right: 12px

    View full-size slide

  179. _messaging.sass
    .flash-message
    position: relative
    margin: 0 auto 15px
    width: 435px
    border-radius: 5px
    padding: 10px 50px 10px 15px
    color: white
    font-weight: bold
    .flash-icon
    display: block
    position: absolute
    top: 11px
    right: 12px
    .flash-info
    @extend .flash-message
    background: #a4a4a4
    text-shadow: 0 -1px #838484
    .flash-success
    @extend .flash-message
    background: #1b942a
    text-shadow: 0 -1px #1a7e1c
    .flash-error
    @extend .flash-message
    background: #ef9000
    text-shadow: 0 -1px #e8541c
    li
    font-weight: normal

    View full-size slide

  180. _messaging.sass
    .flash-message
    position: relative
    margin: 0 auto 15px
    width: 435px
    border-radius: 5px
    padding: 10px 50px 10px 15px
    color: white
    font-weight: bold
    .flash-icon
    display: block
    position: absolute
    top: 11px
    right: 12px
    .flash-info
    @extend .flash-message
    background: #a4a4a4
    text-shadow: 0 -1px #838484
    .flash-success
    @extend .flash-message
    background: #1b942a
    text-shadow: 0 -1px #1a7e1c
    .flash-error
    @extend .flash-message
    background: #ef9000
    text-shadow: 0 -1px #e8541c
    li
    font-weight: normal

    View full-size slide

  181. _messaging.sass
    $flash-info-background: #a4a4a4
    $flash-info-text-shadow: #838484
    $flash-success-background: #1b942a
    $flash-success-text-shadow: #1a7e1c
    $flash-error-background: #ef9000
    $flash-error-text-shadow: #e8541c
    .flash-message
    position: relative
    margin: 0 auto 15px
    width: 435px
    border-radius: 5px
    padding: 10px 50px 10px 15px
    color: white
    font-weight: bold
    .flash-icon
    display: block
    position: absolute
    top: 11px
    right: 12px
    .flash-info
    @extend .flash-message
    background: #a4a4a4
    text-shadow: 0 -1px #838484
    .flash-success
    @extend .flash-message
    background: #1b942a
    text-shadow: 0 -1px #1a7e1c
    .flash-error
    @extend .flash-message
    background: #ef9000
    text-shadow: 0 -1px #e8541c
    li
    font-weight: normal

    View full-size slide

  182. _messaging.sass
    $flash-info-background: #a4a4a4
    $flash-info-text-shadow: #838484
    $flash-success-background: #1b942a
    $flash-success-text-shadow: #1a7e1c
    $flash-error-background: #ef9000
    $flash-error-text-shadow: #e8541c
    .flash-message
    position: relative
    margin: 0 auto 15px
    width: 435px
    border-radius: 5px
    padding: 10px 50px 10px 15px
    color: white
    font-weight: bold
    .flash-icon
    display: block
    position: absolute
    top: 11px
    right: 12px
    .flash-info
    @extend .flash-message
    background: $flash-info-background
    text-shadow: 0 -1px $flash-info-text-shadow
    .flash-success
    @extend .flash-message
    background: $flash-success-background
    text-shadow: 0 -1px $flash-success-text-shadow
    .flash-error
    @extend .flash-message
    background: $flash-error-background
    text-shadow: 0 -1px $flash-error-text-shadow
    li
    font-weight: normal

    View full-size slide

  183. _messaging.sass
    $flash-info-background: #a4a4a4
    $flash-info-text-shadow: #838484
    $flash-success-background: #1b942a
    $flash-success-text-shadow: #1a7e1c
    $flash-error-background: #ef9000
    $flash-error-text-shadow: #e8541c
    .flash-message
    position: relative
    margin: 0 auto 15px
    width: 435px
    border-radius: 5px
    padding: 10px 50px 10px 15px
    color: white
    font-weight: bold
    .flash-icon
    display: block
    position: absolute
    top: 11px
    right: 12px
    .flash-info
    @extend .flash-message
    background: $flash-info-background
    text-shadow: 0 -1px $flash-info-text-shadow
    .flash-success
    @extend .flash-message
    background: $flash-success-background
    text-shadow: 0 -1px $flash-success-text-shadow
    .flash-error
    @extend .flash-message
    background: $flash-error-background
    text-shadow: 0 -1px $flash-error-text-shadow
    li
    font-weight: normal

    View full-size slide

  184. _messaging.sass
    .flash-message
    position: relative
    margin: 0 auto 15px
    width: 435px
    border-radius: 5px
    padding: 10px 50px 10px 15px
    color: white
    font-weight: bold
    .flash-icon
    display: block
    position: absolute
    top: 11px
    right: 12px
    .flash-info
    @extend .flash-message
    background: $flash-info-background
    text-shadow: 0 -1px $flash-info-text-shadow
    .flash-success
    @extend .flash-message
    background: $flash-success-background
    text-shadow: 0 -1px $flash-success-text-shadow
    .flash-error
    @extend .flash-message
    background: $flash-error-background
    text-shadow: 0 -1px $flash-error-text-shadow
    li
    font-weight: normal

    View full-size slide

  185. Set all your site-wide values here.
    _config.sass partial

    View full-size slide

  186. _config.sass

    View full-size slide

  187. _config.sass
    $flash-info-background: #a4a4a4
    $flash-info-text-shadow: #838484
    $flash-success-background: #1b942a
    $flash-success-text-shadow: #1a7e1c
    $flash-error-background: #ef9000
    $flash-error-text-shadow: #e8541c

    View full-size slide

  188. _config.sass
    $flash-info-background: #a4a4a4
    $flash-info-text-shadow: #838484
    $flash-success-background: #1b942a
    $flash-success-text-shadow: #1a7e1c
    $flash-error-background: #ef9000
    $flash-error-text-shadow: #e8541c
    screen.sass
    @import compass/reset
    @import layout
    @import messaging

    View full-size slide

  189. _config.sass
    $flash-info-background: #a4a4a4
    $flash-info-text-shadow: #838484
    $flash-success-background: #1b942a
    $flash-success-text-shadow: #1a7e1c
    $flash-error-background: #ef9000
    $flash-error-text-shadow: #e8541c
    screen.sass
    @import compass/reset
    @import layout
    @import messaging
    @import config

    View full-size slide

  190. Just like in algebra class, show your work.
    Math

    View full-size slide

  191. Just like in algebra class, show your work.
    • Replace arbitrary numbers with calculations.
    Math

    View full-size slide

  192. Just like in algebra class, show your work.
    • Replace arbitrary numbers with calculations.
    • Control your grid styles
    Math

    View full-size slide

  193. Just like in algebra class, show your work.
    • Replace arbitrary numbers with calculations.
    • Control your grid styles
    • Document logic in your styles
    Math

    View full-size slide

  194. _messaging.sass
    .flash-message
    position: relative
    margin: 0 auto 15px
    width: 435px
    border-radius: 5px
    padding: 10px 50px 10px 15px
    color: white
    font-weight: bold

    View full-size slide

  195. _messaging.sass
    .flash-message
    position: relative
    margin: 0 auto 15px
    width: 435px
    border-radius: 5px
    padding: 10px 50px 10px 15px
    color: white
    font-weight: bold

    View full-size slide

  196. _messaging.sass
    $flash-message-width: 500px
    .flash-message
    position: relative
    width: 435px
    border-radius: 5px
    padding: 10px 50px 10px 15px
    color: white
    font-weight: bold

    View full-size slide

  197. _messaging.sass
    $flash-message-width: 500px
    $flash-message-h-padding: 15px
    .flash-message
    position: relative
    width: 435px
    border-radius: 5px
    padding: 10px 50px 10px 15px
    color: white
    font-weight: bold

    View full-size slide

  198. _messaging.sass
    $flash-message-width: 500px
    $flash-message-h-padding: 15px
    $flash-message-icon-padding: image-width("icon-info.png")
    .flash-message
    position: relative
    width: 435px
    border-radius: 5px
    padding: 10px 50px 10px 15px
    color: white
    font-weight: bold

    View full-size slide

  199. _messaging.sass
    $flash-message-width: 500px
    $flash-message-h-padding: 15px
    $flash-message-icon-padding: image-width("icon-info.png")
    .flash-message
    position: relative
    width: 435px
    border-radius: 5px
    padding: 10px 50px 10px 15px
    color: white
    font-weight: bold
    35px

    View full-size slide

  200. _messaging.sass
    $flash-message-width: 500px
    $flash-message-h-padding: 15px
    $flash-message-icon-padding: image-width("icon-info.png") + $flash-message-h-padding
    .flash-message
    position: relative
    width: 435px
    border-radius: 5px
    padding: 10px 50px 10px 15px
    color: white
    font-weight: bold

    View full-size slide

  201. _messaging.sass
    $flash-message-width: 500px
    $flash-message-h-padding: 15px
    $flash-message-icon-padding: image-width("icon-info.png") + $flash-message-h-padding
    .flash-message
    position: relative
    width: 435px
    border-radius: 5px
    padding: 10px 50px 10px 15px
    color: white
    font-weight: bold

    View full-size slide

  202. _messaging.sass
    $flash-message-width: 500px
    $flash-message-h-padding: 15px
    $flash-message-icon-padding: image-width("icon-info.png") + $flash-message-h-padding
    .flash-message
    position: relative
    width: 435px
    border-radius: 5px
    padding: 10px 50px 10px 15px
    color: white
    font-weight: bold

    View full-size slide

  203. _messaging.sass
    $flash-message-width: 500px
    $flash-message-h-padding: 15px
    $flash-message-icon-padding: image-width("icon-info.png") + 15px
    .flash-message
    position: relative
    width: $flash-message-width - $flash-message-h-padding * 2 - $flash-message-icon-padding
    border-radius: 5px
    padding: 10px 50px 10px 15px
    color: white
    font-weight: bold

    View full-size slide

  204. _messaging.sass
    $flash-message-width: 500px
    $flash-message-h-padding: 15px
    $flash-message-icon-padding: image-width("icon-info.png") + 15px
    .flash-message
    position: relative
    width: $flash-message-width - $flash-message-h-padding * 2 - $flash-message-icon-padding
    border-radius: 5px
    padding: 10px 50px 10px 15px
    color: white
    font-weight: bold

    View full-size slide

  205. _messaging.sass
    $flash-message-width: 500px
    $flash-message-h-padding: 15px
    $flash-message-icon-padding: image-width("icon-info.png") + 15px
    .flash-message
    position: relative
    width: $flash-message-width - $flash-message-h-padding * 2 - $flash-message-icon-padding
    border-radius: 5px
    padding: 10px 50px 10px 15px
    color: white
    font-weight: bold

    View full-size slide

  206. _messaging.sass
    $flash-message-width: 500px
    $flash-message-h-padding: 15px
    $flash-message-icon-padding: image-width("icon-info.png") + 15px
    .flash-message
    position: relative
    width: $flash-message-width - $flash-message-h-padding * 2 - $flash-message-icon-padding
    border-radius: 5px
    padding: 10px 50px 10px 15px
    color: white
    font-weight: bold

    View full-size slide

  207. _messaging.sass
    $flash-message-width: 500px
    $flash-message-h-padding: 15px
    $flash-message-icon-padding: image-width("icon-info.png") + 15px
    .flash-message
    position: relative
    width: $flash-message-width - $flash-message-h-padding * 2 - $flash-message-icon-padding
    border-radius: 5px
    padding: 10px 50px 10px 15px
    color: white
    font-weight: bold

    View full-size slide

  208. _messaging.sass
    $flash-message-width: 500px
    $flash-message-h-padding: 15px
    $flash-message-icon-padding: image-width("icon-info.png") + 15px
    .flash-message
    position: relative
    width: $flash-message-width - $flash-message-h-padding * 2 - $flash-message-icon-padding
    border-radius: 5px
    padding: 10px $flash-message-h-padding + $flash-message-icon-padding 10px $flash-message-h-padding
    color: white
    font-weight: bold

    View full-size slide

  209. _messaging.sass
    $flash-message-width: 500px
    $flash-message-h-padding: 15px
    $flash-message-icon-padding: image-width("icon-info.png") + 15px
    .flash-message
    position: relative
    width: $flash-message-width - $flash-message-h-padding * 2 - $flash-message-icon-padding
    border-radius: 5px
    padding: 10px $flash-message-h-padding + $flash-message-icon-padding 10px $flash-message-h-padding
    color: white
    font-weight: bold

    View full-size slide

  210. _messaging.sass
    $flash-message-width: 500px
    $flash-message-h-padding: 15px
    $flash-message-icon-padding: image-width("icon-info.png") + 15px
    .flash-message
    position: relative
    width: $flash-message-width - $flash-message-h-padding * 2 - $flash-message-icon-padding
    border-radius: 5px
    padding: 10px $flash-message-h-padding + $flash-message-icon-padding 10px $flash-message-h-padding
    color: white
    font-weight: bold

    View full-size slide

  211. _messaging.sass
    $flash-message-width: 500px
    $flash-message-h-padding: 15px
    $flash-message-icon-padding: image-width("icon-info.png") + 15px
    .flash-message
    position: relative
    width: $flash-message-width - $flash-message-h-padding * 2 - $flash-message-icon-padding
    border-radius: 5px
    padding: 10px $flash-message-h-padding + $flash-message-icon-padding 10px $flash-message-h-padding
    color: white
    font-weight: bold

    View full-size slide

  212. @mixin(argument)

    View full-size slide

  213. A reusable block of content… with optional arguments.
    @mixin(argument)

    View full-size slide

  214. _messaging.sass
    .flash-info
    @extend .flash-message
    background: $flash-info-background
    text-shadow: 0 -1px $flash-info-text-shadow
    .flash-success
    @extend .flash-message
    background: $flash-success-background
    text-shadow: 0 -1px $flash-success-text-shadow
    .flash-error
    @extend .flash-message
    background: $flash-error-background
    text-shadow: 0 -1px $flash-error-text-shadow
    li
    font-weight: normal

    View full-size slide

  215. _messaging.sass
    .flash-info
    @extend .flash-message
    background: $flash-info-background
    text-shadow: 0 -1px $flash-info-text-shadow
    .flash-success
    @extend .flash-message
    background: $flash-success-background
    text-shadow: 0 -1px $flash-success-text-shadow
    .flash-error
    @extend .flash-message
    background: $flash-error-background
    text-shadow: 0 -1px $flash-error-text-shadow
    li
    font-weight: normal
    see

    View full-size slide

  216. _messaging.sass
    .flash-info
    @extend .flash-message
    background: $flash-info-background
    text-shadow: 0 -1px $flash-info-text-shadow
    .flash-success
    @extend .flash-message
    background: $flash-success-background
    text-shadow: 0 -1px $flash-success-text-shadow
    .flash-error
    @extend .flash-message
    background: $flash-error-background
    text-shadow: 0 -1px $flash-error-text-shadow
    li
    font-weight: normal
    see
    the

    View full-size slide

  217. _messaging.sass
    .flash-info
    @extend .flash-message
    background: $flash-info-background
    text-shadow: 0 -1px $flash-info-text-shadow
    .flash-success
    @extend .flash-message
    background: $flash-success-background
    text-shadow: 0 -1px $flash-success-text-shadow
    .flash-error
    @extend .flash-message
    background: $flash-error-background
    text-shadow: 0 -1px $flash-error-text-shadow
    li
    font-weight: normal
    see
    the
    pattern?

    View full-size slide

  218. _messaging.sass
    @mixin flash-message($type, $background, $text-shadow)
    .flash-#{$type}
    @extend .flash-message
    background: $background
    text-shadow: 0 -1px $text-shadow

    View full-size slide

  219. _messaging.sass
    @mixin flash-message($type, $background, $text-shadow)
    .flash-#{$type}
    @extend .flash-message
    background: $background
    text-shadow: 0 -1px $text-shadow

    View full-size slide

  220. _messaging.sass
    @mixin flash-message($type, $background, $text-shadow)
    .flash-#{$type}
    @extend .flash-message
    background: $background
    text-shadow: 0 -1px $text-shadow

    View full-size slide

  221. _messaging.sass
    @mixin flash-message($type, $background, $text-shadow)
    .flash-#{$type}
    @extend .flash-message
    background: $background
    text-shadow: 0 -1px $text-shadow

    View full-size slide

  222. _messaging.sass
    @mixin flash-message($type, $background, $text-shadow)
    .flash-#{$type}
    @extend .flash-message
    background: $background
    text-shadow: 0 -1px $text-shadow

    View full-size slide

  223. _messaging.sass
    @mixin flash-message($type, $background, $text-shadow)
    .flash-#{$type}
    @extend .flash-message
    background: $background
    text-shadow: 0 -1px $text-shadow

    View full-size slide

  224. _messaging.sass
    @mixin flash-message($type, $background, $text-shadow)
    .flash-#{$type}
    @extend .flash-message
    background: $background
    text-shadow: 0 -1px $text-shadow

    View full-size slide

  225. _messaging.sass
    @mixin flash-message($type, $background, $text-shadow)
    .flash-#{$type}
    @extend .flash-message
    background: $background
    text-shadow: 0 -1px $text-shadow

    View full-size slide

  226. _messaging.sass
    @mixin flash-message($type, $background, $text-shadow)
    .flash-#{$type}
    @extend .flash-message
    background: $background
    text-shadow: 0 -1px $text-shadow
    @if $type == error
    li
    font-weight: normal

    View full-size slide

  227. _messaging.sass
    @mixin flash-message($type, $background, $text-shadow)
    .flash-#{$type}
    @extend .flash-message
    background: $background
    text-shadow: 0 -1px $text-shadow
    @if $type == error
    li
    font-weight: normal

    View full-size slide

  228. _messaging.sass
    @mixin flash-message($type, $background, $text-shadow)
    .flash-#{$type}
    @extend .flash-message
    background: $background
    text-shadow: 0 -1px $text-shadow
    @if $type == error
    li
    font-weight: normal

    View full-size slide

  229. _messaging.sass
    @include flash-message(info, $flash-info-background, $flash-info-text-shadow)
    @include flash-message(success, $flash-success-background, $flash-success-text-shadow)
    @include flash-message(error, $flash-error-background, $flash-error-text-shadow)
    @mixin flash-message($type, $background, $text-shadow)
    .flash-#{$type}
    @extend .flash-message
    background: $background
    text-shadow: 0 -1px $text-shadow
    @if $type == error
    li
    font-weight: normal

    View full-size slide

  230. _messaging.sass
    +flash-message(info, $flash-info-background, $flash-info-text-shadow)
    +flash-message(success, $flash-success-background, $flash-success-text-shadow)
    +flash-message(error, $flash-error-background, $flash-error-text-shadow)
    =flash-message($type, $background, $text-shadow)
    .flash-#{$type}
    @extend .flash-message
    background: $background
    text-shadow: 0 -1px $text-shadow
    @if $type == error
    li
    font-weight: normal

    View full-size slide

  231. Delightfully simple with Compass
    Sprites

    View full-size slide

  232. Delightfully simple with Compass
    Sprites
    error.png
    info.png
    success.png

    View full-size slide

  233. Delightfully simple with Compass
    Sprites
    error.png
    info.png
    success.png

    View full-size slide

  234. Delightfully simple with Compass
    Sprites
    error.png
    info.png
    success.png
    foo-sprite.png

    View full-size slide

  235. create folder of images to sprite

    View full-size slide

  236. place images in folder

    View full-size slide

  237. simplify filenames

    View full-size slide

  238. _messaging.sass
    .flash-icon
    display: block
    position: absolute
    top: 11px
    right: 12px

    View full-size slide

  239. _messaging.sass
    .icon-sprite
    display: block
    position: absolute
    top: 11px
    right: 12px

    View full-size slide

  240. _messaging.sass
    .icon-sprite
    display: block
    position: absolute
    top: 11px
    right: 12px
    @import "icon/*.png"
    +all-icon-sprites

    View full-size slide

  241. _messaging.sass
    .icon-sprite
    display: block
    position: absolute
    top: 11px
    right: 12px
    @import "icon/*.png"
    +all-icon-sprites
    $icon-sprite-dimensions: true

    View full-size slide

  242. _messaging.sass
    .icon-sprite
    display: block
    position: absolute
    top: 11px
    right: 12px
    @import "icon/*.png"
    +all-icon-sprites
    $icon-sprite-dimensions: true

    View full-size slide

  243. _messaging.sass
    .icon-sprite
    display: block
    position: absolute
    top: 11px
    right: 12px
    @import "icon/*.png"
    +all-icon-sprites
    $icon-sprite-dimensions: true
    Compass config file

    View full-size slide

  244. _messaging.sass
    .icon-sprite
    display: block
    position: absolute
    top: 11px
    right: 12px
    @import "icon/*.png"
    +all-icon-sprites
    $icon-sprite-dimensions: true
    config.rb
    http_path = "/"
    css_dir = "stylesheets"
    sass_dir = "sass"
    images_dir = "images"
    javascripts_dir = "javascripts"
    output_style = :nested
    relative_assets = true
    line_comments = false
    Compass config file

    View full-size slide

  245. _messaging.sass
    .icon-sprite
    display: block
    position: absolute
    top: 11px
    right: 12px
    @import "icon/*.png"
    +all-icon-sprites
    $icon-sprite-dimensions: true
    config.rb
    http_path = "/"
    css_dir = "stylesheets"
    sass_dir = "sass"
    images_dir = "images"
    javascripts_dir = "javascripts"
    output_style = :nested
    relative_assets = true
    line_comments = false
    Compass config file

    View full-size slide

  246. _messaging.sass
    .icon-sprite
    display: block
    position: absolute
    top: 11px
    right: 12px
    @import "icon/*.png"
    +all-icon-sprites
    $icon-sprite-dimensions: true
    Compass config file

    View full-size slide

  247. _messaging.sass
    .icon-sprite
    display: block
    position: absolute
    top: 11px
    right: 12px
    @import "icon/*.png"
    +all-icon-sprites
    $icon-sprite-dimensions: true
    generated sprite
    icon-s5c33447329.png
    Compass config file

    View full-size slide

  248. Compiled sprite CSS
    .icon-sprite, .icon-error, .icon-info, .icon-success {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px; }
    .icon-sprite, .icon-error, .icon-info, .icon-success {
    background: url('../images/icon-sa3bc8b9105.png') no-repeat; }

    View full-size slide

  249. Compiled sprite CSS
    .icon-sprite, .icon-error, .icon-info, .icon-success {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px; }
    .icon-sprite, .icon-error, .icon-info, .icon-success {
    background: url('../images/icon-sa3bc8b9105.png') no-repeat; }

    View full-size slide

  250. Compiled sprite CSS
    .icon-sprite, .icon-error, .icon-info, .icon-success {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px; }
    .icon-sprite, .icon-error, .icon-info, .icon-success {
    background: url('../images/icon-sa3bc8b9105.png') no-repeat; }

    View full-size slide

  251. Compiled sprite CSS
    .icon-sprite, .icon-error, .icon-info, .icon-success {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px; }
    .icon-sprite, .icon-error, .icon-info, .icon-success {
    background: url('../images/icon-sa3bc8b9105.png') no-repeat; }

    View full-size slide

  252. Compiled sprite CSS
    .icon-sprite, .icon-error, .icon-info, .icon-success {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px; }
    .icon-sprite, .icon-error, .icon-info, .icon-success {
    background: url('../images/icon-sa3bc8b9105.png') no-repeat; }
    .icon-error {
    background-position: 0 0;
    height: 19px;
    width: 20px; }
    .icon-info {
    background-position: 0 -19px;
    height: 21px;
    width: 20px; }
    .icon-success {
    background-position: 0 -40px;
    height: 21px;
    width: 20px; }

    View full-size slide

  253. Compiled sprite CSS
    .icon-sprite, .icon-error, .icon-info, .icon-success {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px; }
    .icon-sprite, .icon-error, .icon-info, .icon-success {
    background: url('../images/icon-sa3bc8b9105.png') no-repeat; }
    .icon-error {
    background-position: 0 0;
    height: 19px;
    width: 20px; }
    .icon-info {
    background-position: 0 -19px;
    height: 21px;
    width: 20px; }
    .icon-success {
    background-position: 0 -40px;
    height: 21px;
    width: 20px; }

    View full-size slide

  254. Compiled sprite CSS
    .icon-sprite, .icon-error, .icon-info, .icon-success {
    display: block;
    position: absolute;
    top: 11px;
    right: 12px; }
    .icon-sprite, .icon-error, .icon-info, .icon-success {
    background: url('../images/icon-sa3bc8b9105.png') no-repeat; }
    .icon-error {
    background-position: 0 0;
    height: 19px;
    width: 20px; }
    .icon-info {
    background-position: 0 -19px;
    height: 21px;
    width: 20px; }
    .icon-success {
    background-position: 0 -40px;
    height: 21px;
    width: 20px; }

    View full-size slide

  255. messaging.html


    You have mail.



    Settings updated!



    Please fix the following errors:

    Username requires more pizazz.
    Password is too easy to hack.
    You must be at least this tall to ride this ride.


    View full-size slide

  256. messaging.html


    You have mail.



    Settings updated!



    Please fix the following errors:

    Username requires more pizazz.
    Password is too easy to hack.
    You must be at least this tall to ride this ride.


    View full-size slide

  257. messaging.html


    You have mail.



    Settings updated!



    Please fix the following errors:

    Username requires more pizazz.
    Password is too easy to hack.
    You must be at least this tall to ride this ride.


    View full-size slide

  258. messaging.html


    You have mail.



    Settings updated!



    Please fix the following errors:

    Username requires more pizazz.
    Password is too easy to hack.
    You must be at least this tall to ride this ride.


    View full-size slide

  259. Built into Compass.
    Inline images

    View full-size slide

  260. Built into Compass.
    Inline images

    View full-size slide

  261. Inline images
    ul
    margin-left: 20px
    list-style: disc

    View full-size slide

  262. Inline images
    ul
    margin-left: 20px
    $bullet-image: "bullet.png"
    list-style: disc

    View full-size slide

  263. Inline images
    ul
    margin-left: 20px
    $bullet-image: "bullet.png"
    list-style-image: inline-image($bullet-image, image/png)

    View full-size slide

  264. Inline images
    ul
    margin-left: 20px
    $bullet-image: "bullet.png"
    list-style-image: inline-image($bullet-image, image/png)
    ul {
    list-style-image: url('data:image/
    png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAJCAYAAAAPU20uAAAAT0lEQVR42r3KsQ2AMAxE0ZuA
    UdIwAPOwldfJJiAxgN344muDQslJv/EzSB5V53tdhsy8uJgM5Pf+eHD3e4UymNkZEc
    +MuslQ26pW7VNNNgBdFvofIZ4THgAAAABJRU5ErkJggg==');
    margin-left: 20px; }

    View full-size slide

  265. How about some CSS3?

    View full-size slide

  266. Ooooh, rounded corners…
    border-radius

    View full-size slide

  267. border-radius
    CSS
    .flash-message {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px; }

    View full-size slide

  268. @import compass/css3
    .flash-message
    +border-radius(5px)
    border-radius
    Sass
    CSS
    .flash-message {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px; }

    View full-size slide

  269. Add some depth
    box-shadow

    View full-size slide

  270. box-shadow
    .flash-message {
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset;
    -o-box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset; }
    CSS

    View full-size slide

  271. box-shadow
    .flash-message
    $inner-shadow: 0 0 3px rgba(0, 0, 0, .12) inset
    $inner-shadow-top: 0 1px 0 rgba(0, 0, 0, .05) inset
    +box-shadow($inner-shadow, $inner-shadow-top)
    .flash-message {
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset;
    -o-box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset; }
    Sass
    CSS

    View full-size slide

  272. box-shadow
    .flash-message
    $inner-shadow: 0 0 3px rgba(0, 0, 0, .12) inset
    $inner-shadow-top: 0 1px 0 rgba(0, 0, 0, .05) inset
    +box-shadow($inner-shadow, $inner-shadow-top)
    .flash-message {
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset;
    -o-box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.12) inset, 0 1px 0 rgba(0, 0, 0, 0.05) inset; }
    Sass
    CSS

    View full-size slide

  273. Advanced nesting
    Parent Selector

    View full-size slide

  274. div
    color: black
    .foo
    color: black
    &.bar
    color: black
    &:hover
    color: black
    .ie7 &
    color: black
    .parent & .child
    color: black
    Sass

    View full-size slide

  275. div
    color: black
    .foo
    color: black
    &.bar
    color: black
    &:hover
    color: black
    .ie7 &
    color: black
    .parent & .child
    color: black
    div {
    color: black; }
    div .foo {
    color: black; }
    div.bar {
    color: black; }
    div:hover {
    color: black; }
    .ie7 div {
    color: black; }
    .parent div .child {
    color: black; }
    Sass CSS

    View full-size slide

  276. div
    color: black
    .foo
    color: black
    &.bar
    color: black
    &:hover
    color: black
    .ie7 &
    color: black
    .parent & .child
    color: black
    div {
    color: black; }
    div .foo {
    color: black; }
    div.bar {
    color: black; }
    div:hover {
    color: black; }
    .ie7 div {
    color: black; }
    .parent div .child {
    color: black; }
    Sass CSS

    View full-size slide

  277. div
    color: black
    .foo
    color: black
    &.bar
    color: black
    &:hover
    color: black
    .ie7 &
    color: black
    .parent & .child
    color: black
    div {
    color: black; }
    div .foo {
    color: black; }
    div.bar {
    color: black; }
    div:hover {
    color: black; }
    .ie7 div {
    color: black; }
    .parent div .child {
    color: black; }
    Sass CSS

    View full-size slide

  278. div
    color: black
    .foo
    color: black
    &.bar
    color: black
    &:hover
    color: black
    .ie7 &
    color: black
    .parent & .child
    color: black
    div {
    color: black; }
    div .foo {
    color: black; }
    div.bar {
    color: black; }
    div:hover {
    color: black; }
    .ie7 div {
    color: black; }
    .parent div .child {
    color: black; }
    Sass CSS

    View full-size slide

  279. div
    color: black
    .foo
    color: black
    &.bar
    color: black
    &:hover
    color: black
    .ie7 &
    color: black
    .parent & .child
    color: black
    div {
    color: black; }
    div .foo {
    color: black; }
    div.bar {
    color: black; }
    div:hover {
    color: black; }
    .ie7 div {
    color: black; }
    .parent div .child {
    color: black; }
    Sass CSS

    View full-size slide

  280. div
    color: black
    .foo
    color: black
    &.bar
    color: black
    &:hover
    color: black
    .ie7 &
    color: black
    .parent & .child
    color: black
    div {
    color: black; }
    div .foo {
    color: black; }
    div.bar {
    color: black; }
    div:hover {
    color: black; }
    .ie7 div {
    color: black; }
    .parent div .child {
    color: black; }
    Sass CSS

    View full-size slide

  281. Styling links

    View full-size slide

  282. .flash-message
    a
    text-decoration: none
    color: $link-color
    &:visited
    color: $link-color
    &:hover
    color: $link-hover-color
    text-decoration: underline
    &:active
    color: $link-active-color
    Styling links

    View full-size slide

  283. .flash-message
    a
    text-decoration: none
    color: $link-color
    &:visited
    color: $link-color
    &:hover
    color: $link-hover-color
    text-decoration: underline
    &:active
    color: $link-active-color
    Styling links
    $link-color: #89F2FF
    $link-hover-color: darken($link-color, 20%)
    $link-active-color: complement($link-color)

    View full-size slide

  284. .flash-message
    a
    text-decoration: none
    color: $link-color
    &:visited
    color: $link-color
    &:hover
    color: $link-hover-color
    text-decoration: underline
    &:active
    color: $link-active-color
    Styling links
    .flash-message a {
    text-decoration: none;
    color: #89f2ff; }
    .flash-message a:visited {
    color: #89f2ff; }
    .flash-message a:hover {
    color: #23e7ff;
    text-decoration: underline; }
    .flash-message a:active {
    color: #ff9689; }
    $link-color: #89F2FF
    $link-hover-color: darken($link-color, 20%)
    $link-active-color: complement($link-color)
    Compiled CSS

    View full-size slide

  285. IE fixes
    .flash-message
    background: #f9f9f9 image-url("images/page.png")
    +box-shadow(0 0 0 3px rgba(black, .5))
    .ie &
    +box-shadow(0 0 0 1px rgba(black, .2)) // adjust box-shadow
    .ie7 &
    border: 1px solid #e0e0e0 // use border in place of box-shadow
    background: #f9f9f9 // just background color

    View full-size slide

  286. IE fixes
    .flash-message {
    background: #f9f9f9 url('../images/icon/info.png?1315463945');
    -moz-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5); }
    .ie .flash-message {
    -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); }
    .ie7 .flash-message {
    border: 1px solid #e0e0e0;
    background: #f9f9f9; }
    .flash-message
    background: #f9f9f9 image-url("images/page.png")
    +box-shadow(0 0 0 3px rgba(black, .5))
    .ie &
    +box-shadow(0 0 0 1px rgba(black, .2)) // adjust box-shadow
    .ie7 &
    border: 1px solid #e0e0e0 // use border in place of box-shadow
    background: #f9f9f9 // just background color
    Compiled CSS

    View full-size slide

  287. WITH GREAT POWER
    COMES GREAT RESPONSIBILITY...

    View full-size slide

  288. Improper @mixin use can cause
    redundant CSS declarations.

    View full-size slide

  289. Improper @mixin use can cause
    redundant CSS declarations.
    Abusing @extend and deep
    nesting will lead to needlessly
    long selector strings.

    View full-size slide

  290. Learn more
    theSassWay.com
    compass-style.org
    sass-lang.com
    Slides?
    bit.ly/sass-why
    Questions?
    hit me up… @beau

    View full-size slide