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

Sass Why for the CSS Guy

15555b729dfdfb05292eb0ef373f9a7a?s=47 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

15555b729dfdfb05292eb0ef373f9a7a?s=128

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
  2. CSS IS AWESOME

  3. CSS IS AWESOME via stevenf.com

  4. None
  5. None
  6. Syntactically

  7. Syntactically Awesome

  8. Syntactically Awesome Style

  9. Syntactically Awesome Style Sheets

  10. None
  11. None
  12. Sass

  13. • CSS meta-language Sass

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

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

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

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

    • Helps to create manageable stylesheets • An upgrade to CSS Sass makes CSS fun again. Sass
  18. • 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
  19. None
  20. • CSS authoring framework built in Sass

  21. • CSS authoring framework built in Sass • Collection of

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

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

    Sass mixins and functions • Library of the web’s most reusable CSS patterns • Makes CSS3 easy
  24. None
  25. Two delicous flavors…

  26. Sass and SCSS Two delicous flavors…

  27. Sass and SCSS Two delicous flavors…

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

  29. • both functionally equivalent • both support the same feature

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

    set • neither will be deprecated Sass and SCSS Two delicous flavors…
  31. • 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…
  32. • 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…
  33. • 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…
  34. None
  35. CSS nav { background: #ccc; width: 500px; margin: 10px auto;

    } nav a { float: left; padding: 0 5px; color: #666; } nav a:hover { color: #000; }
  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; }
  37. 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; }
  38. 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; }
  39. 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; }
  40. 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; }
  41. 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; }
  42. 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; }
  43. 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; }
  44. 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; }
  45. 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; }
  46. 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
  47. 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; }
  48. 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; }
  49. 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; }
  50. None
  51. SCSS Sass Advantages of each…

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

  53. • the “newer” syntax • a super set of CSS

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

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

    • very similar to CSS • low barrier to entry SCSS Sass Advantages of each…
  56. • 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…
  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 SCSS Sass Advantages of each…
  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 SCSS Sass Advantages of each…
  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 SCSS Sass Advantages of each…
  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 SCSS Sass Advantages of each…
  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 SCSS Sass Advantages of each…
  62. • 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…
  63. • 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…
  64. • 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…
  65. • 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…
  66. • 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…
  67. • 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…
  68. • 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…
  69. • 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…
  70. • 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…
  71. SCSS Sass

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

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

  74. • Add Compass to a project • @import & partials

    • @extend • nesting • $variables • @mixin • sprites • inline images • CSS3 Today’s Roadmap
  75. Let’s refactor the messaging style sheet into Sass. Flash Messaging

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

  77. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sass Why</title> <link href="reset.css"

    rel="stylesheet" /> <link href="messaging.css" rel="stylesheet" /> </head> <body> <!-- content here --> </body> </html> messaging.html
  78. <div class="flash-info"> <img src="images/icon-info.png" alt="info icon" class="flash-icon"> <p>You have mail.</p>

    </div> <div class="flash-success"> <img src="images/icon-success.png" alt="success icon" class="flash-icon"> <p>Settings updated!</p> </div> <div class="flash-error"> <img src="images/icon-error.png" alt="error icon" class="flash-icon"> <p>Please fix the following errors:</p> <ul> <li>Username requires more pazazz.</li> <li>Password is too easy to hack.</li> <li>You must be at least this tall to ride this ride.</li> </ul> </div> Our content…
  79. <div class="flash-info"> <img src="images/icon-info.png" alt="info icon" class="flash-icon"> <p>You have mail.</p>

    </div> <div class="flash-success"> <img src="images/icon-success.png" alt="success icon" class="flash-icon"> <p>Settings updated!</p> </div> <div class="flash-error"> <img src="images/icon-error.png" alt="error icon" class="flash-icon"> <p>Please fix the following errors:</p> <ul> <li>Username requires more pazazz.</li> <li>Password is too easy to hack.</li> <li>You must be at least this tall to ride this ride.</li> </ul> </div> Our content… info
  80. <div class="flash-info"> <img src="images/icon-info.png" alt="info icon" class="flash-icon"> <p>You have mail.</p>

    </div> <div class="flash-success"> <img src="images/icon-success.png" alt="success icon" class="flash-icon"> <p>Settings updated!</p> </div> <div class="flash-error"> <img src="images/icon-error.png" alt="error icon" class="flash-icon"> <p>Please fix the following errors:</p> <ul> <li>Username requires more pazazz.</li> <li>Password is too easy to hack.</li> <li>You must be at least this tall to ride this ride.</li> </ul> </div> Our content… success
  81. <div class="flash-info"> <img src="images/icon-info.png" alt="info icon" class="flash-icon"> <p>You have mail.</p>

    </div> <div class="flash-success"> <img src="images/icon-success.png" alt="success icon" class="flash-icon"> <p>Settings updated!</p> </div> <div class="flash-error"> <img src="images/icon-error.png" alt="error icon" class="flash-icon"> <p>Please fix the following errors:</p> <ul> <li>Username requires more pazazz.</li> <li>Password is too easy to hack.</li> <li>You must be at least this tall to ride this ride.</li> </ul> </div> Our content… error
  82. body { background: #e3e3e3; margin: 20px; font: 16px/24px sans-serif; }

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

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

    ul { list-style: disc; margin-left: 20px; } messaging.css prose
  85. .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
  86. .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
  87. .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
  88. .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
  89. .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
  90. .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
  91. 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
  92. 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
  93. 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
  94. 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
  95. 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
  96. Add Compass to project ~

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

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

    create
  99. Add Compass to project

  100. Add Compass to project Compass configuration file

  101. Add Compass to project Compass configuration file

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

  103. Add Compass to project CSS compiled from Sass files

  104. Add Compass to project

  105. Add Compass to project

  106. Add Compass to project

  107. Add Compass to project

  108. Add Compass to project

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

    create
  110. 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
  111. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sass Why</title> <link href="reset.css"

    rel="stylesheet" /> <link href="messaging.css" rel="stylesheet" /> </head> <body> <div class="flash-info"> ••• <div class="flash-success"> ••• <div class="flash-error"> ••• </body> </html> messaging.html
  112. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sass Why</title> <link href="reset.css"

    rel="stylesheet" /> <link href="messaging.css" rel="stylesheet" /> </head> <body> <div class="flash-info"> ••• <div class="flash-success"> ••• <div class="flash-error"> ••• </body> </html> messaging.html update links
  113. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sass Why</title> <link href="stylesheets/reset.css"

    rel="stylesheet" /> <link href="stylesheets/messaging.css" rel="stylesheet" /> </head> <body> <div class="flash-info"> ••• <div class="flash-success"> ••• <div class="flash-error"> ••• </body> </html> messaging.html update links
  114. None
  115. Let’s abstract a little more.

  116. @import (in Sass)

  117. • not during page render in browser like in CSS

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

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

    • when compiling Sass to CSS • organize your styles into logical partials @import (in Sass)
  120. • 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)
  121. • 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)
  122. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sass Why</title> <link href="stylesheets/reset.css"

    rel="stylesheet" /> <link href="stylesheets/messaging.css" rel="stylesheet" /> </head> <body> <div class="flash-info"> ••• <div class="flash-success"> ••• <div class="flash-error"> ••• </body> </html> messaging.html
  123. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sass Why</title> <link href="stylesheets/reset.css"

    rel="stylesheet" /> <link href="stylesheets/messaging.css" rel="stylesheet" /> </head> <body> <div class="flash-info"> ••• <div class="flash-success"> ••• <div class="flash-error"> ••• </body> </html> messaging.html remove these
  124. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sass Why</title> <link href="stylesheets/screen.css"

    rel="stylesheet" /> </head> <body> <div class="flash-info"> ••• <div class="flash-success"> ••• <div class="flash-error"> ••• </body> </html> messaging.html add screen.css
  125. Remove reset and compiled css

  126. None
  127. rename to screen.scss

  128. rename to screen.scss

  129. create two partials

  130. create two partials

  131. body { background: #e3e3e3; margin: 20px; font: 16px/24px sans-serif; }

    ul { list-style: disc; margin-left: 20px; } _layout.scss layout prose
  132. _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; }
  133. screen.scss

  134. @import "layout"; screen.scss

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

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

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

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

    partials
  139. @extend

  140. When one element should have all the styles of another,

    plus its own styles. @extend
  141. _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; }
  142. _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
  143. _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; }
  144. _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; }
  145. _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; }
  146. _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; }
  147. _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; }
  148. _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; }
  149. .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
  150. _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; }
  151. _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; }
  152. _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; }
  153. _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; }
  154. _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; }
  155. .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
  156. Nesting

  157. • group styles together Nesting

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

  159. • group styles together • avoid duplication of selectors •

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

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

    keep your code DRY Sass nesting ≠ html structure Nesting FASTER TRAFFIC KEEP LEFT
  162. Warning about Nesting

  163. 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
  164. 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; }
  165. _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; }
  166. _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; }
  167. _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; }
  168. _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; }
  169. _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; }
  170. 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; }
  171. 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; }
  172. 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; }
  173. 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
  174. 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; }
  175. 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
  176. 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
  177. SCSS to Sass

  178. _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; }
  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-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
  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-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
  181. @import "compass/reset"; @import "layout"; @import "messaging"; screen.scss

  182. @import "compass/reset"; @import "layout"; @import "messaging"; screen.scss @import supports both

    syntaxes, no changes here
  183. @import compass/reset @import layout @import messaging screen.sass

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

    optional
  185. $variables

  186. • containers for values $variables

  187. • containers for values • variable name define the purpose

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

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

    of values • Five value types in Sass: • numbers: 5, 8.2, 99%, 20px $variables
  190. • 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
  191. • 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
  192. • 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
  193. • 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
  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 .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
  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 .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
  196. _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
  197. _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
  198. _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
  199. _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
  200. _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
  201. Set all your site-wide values here. _config.sass partial

  202. _config.sass

  203. _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
  204. _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
  205. _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
  206. Math

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

  208. Just like in algebra class, show your work. • Replace

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

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

    arbitrary numbers with calculations. • Control your grid styles • Document logic in your styles Math
  211. _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
  212. _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
  213. _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
  214. _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
  215. _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
  216. _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
  217. _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
  218. _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
  219. _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
  220. _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
  221. _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
  222. _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
  223. _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
  224. _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
  225. _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
  226. _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
  227. _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
  228. _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
  229. @mixin(argument)

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

  231. _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
  232. _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
  233. _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
  234. _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?
  235. _messaging.sass @mixin flash-message($type, $background, $text-shadow) .flash-#{$type} @extend .flash-message background: $background

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

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

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

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

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

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

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

    text-shadow: 0 -1px $text-shadow
  243. _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
  244. _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
  245. _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
  246. _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
  247. _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
  248. Delightfully simple with Compass Sprites

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

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

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

  252. None
  253. create folder of images to sprite

  254. place images in folder

  255. simplify filenames

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

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

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

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

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

    @import "icon/*.png" +all-icon-sprites $icon-sprite-dimensions: true
  261. _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
  262. _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
  263. _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
  264. _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
  265. _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
  266. 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; }
  267. 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; }
  268. 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; }
  269. 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; }
  270. 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; }
  271. 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; }
  272. 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; }
  273. messaging.html <div class="flash-info"> <img src="images/icon-info.png" alt="info icon" class="flash-icon"> <p>You have

    mail.</p> </div> <div class="flash-success"> <img src="images/icon-success.png" alt="success icon" class="flash-icon"> <p>Settings updated!</p> </div> <div class="flash-error"> <img src="images/icon-error.png" alt="error icon" class="flash-icon"> <p>Please fix the following errors:</p> <ul> <li>Username requires more pizazz.</li> <li>Password is too easy to hack.</li> <li>You must be at least this tall to ride this ride.</li> </ul> </div>
  274. messaging.html <div class="flash-info"> <img src="images/icon-info.png" alt="info icon" class="flash-icon"> <p>You have

    mail.</p> </div> <div class="flash-success"> <img src="images/icon-success.png" alt="success icon" class="flash-icon"> <p>Settings updated!</p> </div> <div class="flash-error"> <img src="images/icon-error.png" alt="error icon" class="flash-icon"> <p>Please fix the following errors:</p> <ul> <li>Username requires more pizazz.</li> <li>Password is too easy to hack.</li> <li>You must be at least this tall to ride this ride.</li> </ul> </div>
  275. messaging.html <div class="flash-info"> <div class="icon-info"></div> <p>You have mail.</p> </div> <div

    class="flash-success"> <div class="icon-success"></div> <p>Settings updated!</p> </div> <div class="flash-error"> <div class="icon-error"></div> <p>Please fix the following errors:</p> <ul> <li>Username requires more pizazz.</li> <li>Password is too easy to hack.</li> <li>You must be at least this tall to ride this ride.</li> </ul> </div>
  276. messaging.html <div class="flash-info"> <div class="icon-info"></div> <p>You have mail.</p> </div> <div

    class="flash-success"> <div class="icon-success"></div> <p>Settings updated!</p> </div> <div class="flash-error"> <div class="icon-error"></div> <p>Please fix the following errors:</p> <ul> <li>Username requires more pizazz.</li> <li>Password is too easy to hack.</li> <li>You must be at least this tall to ride this ride.</li> </ul> </div>
  277. None
  278. None
  279. Built into Compass. Inline images

  280. Built into Compass. Inline images

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

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

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

  284. 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; }
  285. None
  286. How about some CSS3?

  287. Ooooh, rounded corners… border-radius

  288. 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; }
  289. @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; }
  290. Add some depth box-shadow

  291. 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
  292. 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
  293. 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
  294. None
  295. None
  296. Advanced nesting Parent Selector

  297. None
  298. div color: black .foo color: black &.bar color: black &:hover

    color: black .ie7 & color: black .parent & .child color: black Sass
  299. 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
  300. 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
  301. 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
  302. 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
  303. 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
  304. 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
  305. Styling links

  306. .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
  307. .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)
  308. .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
  309. 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
  310. 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
  311. None
  312. WITH GREAT POWER COMES GREAT RESPONSIBILITY...

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

  314. Improper @mixin use can cause redundant CSS declarations. Abusing @extend

    and deep nesting will lead to needlessly long selector strings.
  315. None
  316. Learn more theSassWay.com compass-style.org sass-lang.com Slides? bit.ly/sass-why Questions? hit me

    up… @beau