Sass Why for the CSS Guy

6,030 views

Published on

An intro to Sass and Compass for CSS fans.

Beau Smith, @beau
Front end tech lead at @Square

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,030
On SlideShare
0
From Embeds
0
Number of Embeds
3,733
Actions
Shares
0
Downloads
85
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • DRY: Concept\n- Every piece of knowledge\n- should have a single representation\n- within a system\n
  • DRY: Concept\n- Every piece of knowledge\n- should have a single representation\n- within a system\n
  • DRY: Concept\n- Every piece of knowledge\n- should have a single representation\n- within a system\n
  • DRY: Concept\n- Every piece of knowledge\n- should have a single representation\n- within a system\n
  • DRY: Concept\n- Every piece of knowledge\n- should have a single representation\n- within a system\n
  • DRY: Concept\n- Every piece of knowledge\n- should have a single representation\n- within a system\n
  • DRY: Concept\n- Every piece of knowledge\n- should have a single representation\n- within a system\n
  • DRY: Concept\n- Every piece of knowledge\n- should have a single representation\n- within a system\n
  • DRY: Concept\n- Every piece of knowledge\n- should have a single representation\n- within a system\n
  • DRY: Concept\n- Every piece of knowledge\n- should have a single representation\n- within a system\n
  • DRY: Concept\n- Every piece of knowledge\n- should have a single representation\n- within a system\n
  • DRY: Concept\n- Every piece of knowledge\n- should have a single representation\n- within a system\n
  • DRY: Concept\n- Every piece of knowledge\n- should have a single representation\n- within a system\n
  • DRY: Concept\n- Every piece of knowledge\n- should have a single representation\n- within a system\n
  • DRY: Concept\n- Every piece of knowledge\n- should have a single representation\n- within a system\n
  • DRY: Concept\n- Every piece of knowledge\n- should have a single representation\n- within a system\n
  • DRY: Concept\n- Every piece of knowledge\n- should have a single representation\n- within a system\n
  • DRY: Concept\n- Every piece of knowledge\n- should have a single representation\n- within a system\n
  • DRY: Concept\n- Every piece of knowledge\n- should have a single representation\n- within a system\n
  • DRY: Concept\n- Every piece of knowledge\n- should have a single representation\n- within a system\n
  • DRY: Concept\n- Every piece of knowledge\n- should have a single representation\n- within a system\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Sass Why for the CSS Guy

    1. 1. Sass Whyfor intro to Sass for CSSGuy An the CSS fans
    2. 2. CSSISAWESOME
    3. 3. CSSISAWESOME via stevenf.com
    4. 4. Syntactically
    5. 5. SyntacticallyAwesome
    6. 6. SyntacticallyAwesomeStyle
    7. 7. SyntacticallyAwesomeStyleSheets
    8. 8. Sass
    9. 9. Sass• CSS meta-language
    10. 10. Sass• CSS meta-language• Simpler, more elegant syntax for CSS
    11. 11. Sass• CSS meta-language• Simpler, more elegant syntax for CSS• Helps to create manageable stylesheets
    12. 12. Sass• CSS meta-language• Simpler, more elegant syntax for CSS• Helps to create manageable stylesheets• An upgrade to CSS
    13. 13. Sass• CSS meta-language• Simpler, more elegant syntax for CSS• Helps to create manageable stylesheets• An upgrade to CSSSass makes CSS fun again.
    14. 14. Two delicious flavorsSass Sass & SCSS• CSS meta-language• Simpler, more elegant syntax for CSS• Helps to create manageable stylesheets• An upgrade to CSSSass makes CSS fun again.
    15. 15. • CSS authoring framework built in Sass
    16. 16. • CSS authoring framework built in Sass• Collection of Sass mixins and functions
    17. 17. • CSS authoring framework built in Sass• Collection of Sass mixins and functions• Library of the web’s most reusable CSS patterns
    18. 18. • CSS authoring framework built in Sass• Collection of Sass mixins and functions• Library of the web’s most reusable CSS patterns• Makes CSS3 easy
    19. 19. Two delicous flavors…
    20. 20. Two delicous flavors…Sass and SCSS
    21. 21. Two delicous flavors…Sass and SCSS
    22. 22. Two delicous flavors…Sass and SCSS• both functionally equivalent
    23. 23. Two delicous flavors…Sass and SCSS• both functionally equivalent• both support the same feature set
    24. 24. Two delicous flavors…Sass and SCSS• both functionally equivalent• both support the same feature set• neither will be deprecated
    25. 25. Two delicous flavors…Sass and SCSS• both functionally equivalent• both support the same feature set• neither will be deprecated• SCSS is not a successor to Sass
    26. 26. Two delicous flavors…Sass and SCSS• 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
    27. 27. Two delicous flavors…Sass and SCSS• 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
    28. 28. CSSnav { background: #ccc; width: 500px; margin: 10px auto;}nav a { float: left; display: block; padding: 0 5px; color: #666;}nav a:hover { color: #000;}
    29. 29. CSS SCSSnav { nav { background: #ccc; background: #ccc; width: 500px; width: 500px; margin: 10px auto; margin: 10px auto;} a {nav a { float: left; float: left; display: block; display: block; padding: 0 5px; padding: 0 5px; color: #666; color: #666; &:hover {} color: #000;nav a:hover { } color: #000; }} }
    30. 30. CSS SCSSnav { nav { background: #ccc; background: #ccc; width: 500px; width: 500px; margin: 10px auto; margin: 10px auto;} a {nav a { float: left; nesting float: left; display: block; display: block; padding: 0 5px; padding: 0 5px; color: #666; color: #666; &:hover {} color: #000;nav a:hover { } color: #000; }} }
    31. 31. CSS SCSSnav { nav { background: #ccc; background: #ccc; width: 500px; width: 500px; margin: 10px auto; margin: 10px auto;} a {nav a { float: left; nesting float: left; display: block; display: block; padding: 0 5px; padding: 0 5px; color: #666; color: #666; &:hover {} color: #000;nav a:hover { } color: #000; }} }
    32. 32. CSS SCSSnav { nav { background: #ccc; background: #ccc; width: 500px; width: 500px; margin: 10px auto; margin: 10px auto;} a {nav a { float: left; nesting float: left; display: block; display: block; padding: 0 5px; padding: 0 5px; color: #666; color: #666; &:hover {} color: #000;nav a:hover { } color: #000; }} }
    33. 33. CSS SCSSnav { nav { background: #ccc; background: #ccc; width: 500px; width: 500px; margin: 10px auto; margin: 10px auto;} a {nav a { float: left; nesting float: left; display: block; display: block; padding: 0 5px; padding: 0 5px; color: #666; color: #666; &:hover {} color: #000;nav a:hover { } color: #000; }} } the parent selector
    34. 34. CSS SCSSnav { nav { background: #ccc; background: #ccc; width: 500px; width: 500px; margin: 10px auto; margin: 10px auto;} a {nav a { float: left; nesting float: left; display: block; display: block; padding: 0 5px; padding: 0 5px; color: #666; color: #666; &:hover {} color: #000;nav a:hover { } color: #000; }} } the parent selector
    35. 35. CSS SCSSnav { nav { background: #ccc; background: #ccc; width: 500px; width: 500px; margin: 10px auto; margin: 10px auto;} a {nav a { float: left; float: left; display: block; display: block; padding: 0 5px; padding: 0 5px; color: #666; color: #666; &:hover {} color: #000;nav a:hover { } color: #000; }} }
    36. 36. CSS SCSSnav { nav { background: #ccc; background: #ccc; width: 500px; width: 500px; margin: 10px auto; margin: 10px auto;} a {nav a { float: left; float: left; display: block; display: block; padding: 0 5px; padding: 0 5px; color: #666; color: #666; &:hover {} color: #000;nav a:hover { } color: #000; }} } SCSS doesn’t care about whitespace nav { width: 500px; margin: 10px auto; background: #ccc; a { float: left; display: block; padding: 0 5px; color: #666; &:hover { color: #000; }}}
    37. 37. CSS SCSSnav { nav { background: #ccc; background: #ccc; width: 500px; width: 500px; margin: 10px auto; margin: 10px auto;} a {nav a { float: left; float: left; display: block; display: block; padding: 0 5px; padding: 0 5px; color: #666; color: #666; &:hover {} color: #000;nav a:hover { } color: #000; }} }
    38. 38. CSS SCSS Sassnav { nav { nav background: #ccc; background: #ccc; background: #ccc width: 500px; width: 500px; width: 500px margin: 10px auto; margin: 10px auto; margin: 10px auto} a { anav a { float: left; float: left float: left; display: block; display: block display: block; padding: 0 5px; padding: 0 5px padding: 0 5px; color: #666; color: #666 color: #666; &:hover { &:hover} color: #000; color: #000nav a:hover { } color: #000; }} }
    39. 39. CSS SCSS Sassnav { nav { nav background: #ccc; background: #ccc; background: #ccc width: 500px; width: 500px; width: 500px margin: 10px auto; margin: 10px auto; margin: 10px auto} a { anav a { float: left; float: left float: left; display: block; display: block display: block; padding: 0 5px; padding: 0 5px padding: 0 5px; color: #666; color: #666 color: #666; &:hover { &:hover} color: #000; color: #000nav a:hover { } color: #000; }} }
    40. 40. CSS SCSS Sassnav { nav { nav background: #ccc; background: #ccc; background: #ccc width: 500px; width: 500px; width: 500px margin: 10px auto; margin: 10px auto; margin: 10px auto} a { anav a { float: left; float: left float: left; display: block; display: block display: block; padding: 0 5px; padding: 0 5px padding: 0 5px; color: #666; color: #666 color: #666; &:hover { &:hover} color: #000; color: #000nav a:hover { } color: #000; }} }
    41. 41. CSS SCSS Sassnav { nav { nav background: #ccc; background: #ccc; background: #ccc width: 500px; width: 500px; width: 500px margin: 10px auto; margin: 10px auto; margin: 10px auto} a { anav a { float: left; float: left float: left; display: block; display: block display: block; padding: 0 5px; padding: 0 5px padding: 0 5px; color: #666; color: #666 color: #666; &:hover { &:hover} color: #000; color: #000nav a:hover { } color: #000; }} }
    42. 42. Advantages of each…SCSS Sass
    43. 43. Advantages of each…SCSS Sass• the “newer” syntax
    44. 44. Advantages of each…SCSS Sass• the “newer” syntax• a super set of CSS
    45. 45. Advantages of each…SCSS Sass• the “newer” syntax• a super set of CSS• very similar to CSS
    46. 46. Advantages of each…SCSS Sass• the “newer” syntax• a super set of CSS• very similar to CSS• low barrier to entry
    47. 47. Advantages of each…SCSS Sass• the “newer” syntax• a super set of CSS• very similar to CSS• low barrier to entry• allows for single-line rules
    48. 48. Advantages of each…SCSS Sass• 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
    49. 49. Advantages of each…SCSS Sass• 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
    50. 50. Advantages of each…SCSS Sass• 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
    51. 51. Advantages of each…SCSS Sass• 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
    52. 52. Advantages of each…SCSS Sass• 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
    53. 53. Advantages of each…SCSS Sass• the “newer” syntax • no curly braces or semicolons• 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
    54. 54. Advantages of each…SCSS Sass• the “newer” syntax • no curly braces or semicolons• a super set of CSS • white-space aware• 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
    55. 55. Advantages of each…SCSS Sass• the “newer” syntax • no curly braces or semicolons• a super set of CSS • white-space aware• very similar to CSS • shortcuts for @mixin and @include• 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
    56. 56. Advantages of each…SCSS Sass• the “newer” syntax • no curly braces or semicolons• a super set of CSS • white-space aware• very similar to CSS • shortcuts for @mixin and @include• low barrier to entry • more scannable• allows for single-line rules• more flexible for expression• compatible with many CSS parsers• easy to integrate with existing CSS• DRY• the “original” syntax
    57. 57. Advantages of each…SCSS Sass• the “newer” syntax • no curly braces or semicolons• a super set of CSS • white-space aware• very similar to CSS • shortcuts for @mixin and @include• low barrier to entry • more scannable• allows for single-line rules • more concise, better for teams• more flexible for expression• compatible with many CSS parsers• easy to integrate with existing CSS• DRY• the “original” syntax
    58. 58. Advantages of each…SCSS Sass• the “newer” syntax • no curly braces or semicolons• a super set of CSS • white-space aware• very similar to CSS • shortcuts for @mixin and @include• low barrier to entry • more scannable• allows for single-line rules • more concise, better for teams• more flexible for expression • enforces one declaration per line• compatible with many CSS parsers• easy to integrate with existing CSS• DRY• the “original” syntax
    59. 59. Advantages of each…SCSS Sass• the “newer” syntax • no curly braces or semicolons• a super set of CSS • white-space aware• very similar to CSS • shortcuts for @mixin and @include• low barrier to entry • more scannable• allows for single-line rules • more concise, better for teams• more flexible for expression • enforces one declaration per line• compatible with many CSS parsers • cleaner merges• easy to integrate with existing CSS• DRY• the “original” syntax
    60. 60. Advantages of each…SCSS Sass• the “newer” syntax • no curly braces or semicolons• a super set of CSS • white-space aware• very similar to CSS • shortcuts for @mixin and @include• low barrier to entry • more scannable• allows for single-line rules • more concise, better for teams• more flexible for expression • enforces one declaration per line• compatible with many CSS parsers • cleaner merges• easy to integrate with existing CSS • DRY, arguably more so.• DRY• the “original” syntax
    61. 61. Advantages of each…SCSS Sass• the “newer” syntax • no curly braces or semicolons• a super set of CSS • white-space aware• very similar to CSS • shortcuts for @mixin and @include• low barrier to entry • more scannable• allows for single-line rules • more concise, better for teams• more flexible for expression • enforces one declaration per line• compatible with many CSS parsers • cleaner merges• easy to integrate with existing CSS • DRY, arguably more so.• DRY• the “original” syntaxTry both …you may want to use both.
    62. 62. Sass SCSS
    63. 63. ~ sass-convert [input-file] [output-file] Sass SCSS
    64. 64. ~ sass-convert [input-file] [output-file] Sass SCSS CSS
    65. 65. Tonight’s Roadmap• Add Compass to a project• @import & partials• @extend• nesting• $variables• @mixin• sprites• inline images• CSS3
    66. 66. Flash MessagingLet’s refactor the messaging style sheet into Sass.
    67. 67. Flash MessagingLet’s refactor the messaging style sheet into Sass.
    68. 68. messaging.html<!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>
    69. 69. Our content…<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>
    70. 70. Our content…<div class="flash-info"> <img src="images/icon-info.png" alt="info icon" class="flash-icon"> info <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>
    71. 71. Our content…<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> success</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>
    72. 72. Our content…<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> error <li>Password is too easy to hack.</li> <li>You must be at least this tall to ride this ride.</li> </ul></div>
    73. 73. messaging.cssbody { background: #e3e3e3; margin: 20px; font: 16px/24px sans-serif;}ul { list-style: disc; margin-left: 20px;}
    74. 74. messaging.cssbody { background: #e3e3e3; margin: 20px; layout font: 16px/24px sans-serif;}ul { list-style: disc; margin-left: 20px;}
    75. 75. messaging.cssbody { background: #e3e3e3; margin: 20px; font: 16px/24px sans-serif;}ul { list-style: disc; margin-left: 20px; prose}
    76. 76. messaging.css.flash-info { .flash-success { .flash-error { position: relative; position: relative; position: relative; margin: 0 auto 15px; margin: 0 auto 15px; margin: 0 auto 15px; width: 435px; width: 435px; width: 435px; background: #a4a4a4; background: #1b942a; background: #ef9000; border-radius: 5px; border-radius: 5px; border-radius: 5px; padding: 10px 50px 10px 15px; padding: 10px 50px 10px 15px; padding: 10px 50px 10px 15px; color: white; color: white; color: white; font-weight: bold; font-weight: bold; font-weight: bold; text-shadow: 0 -1px #838484; text-shadow: 0 -1px #1a7e1c; text-shadow: 0 -1px #e8541c;} } } .flash-error li { font-weight: normal; } .flash-icon { display: block; position: absolute; top: 11px; right: 12px; }
    77. 77. messaging.css.flash-info { .flash-success { .flash-error { position: relative; position: relative; position: relative; margin: 0 auto 15px; margin: 0 auto 15px; margin: 0 auto 15px; width: 435px; width: 435px; width: 435px; background: #a4a4a4; background: #1b942a; background: #ef9000; border-radius: 5px; border-radius: 5px; border-radius: 5px; padding: 10px 50px 10px 15px; padding: 10px 50px 10px 15px; padding: 10px 50px 10px 15px; color: white; color: white; color: white; font-weight: bold; font-weight: bold; font-weight: bold; text-shadow: 0 -1px #838484; text-shadow: 0 -1px #1a7e1c; text-shadow: 0 -1px #e8541c;} } } .flash-error li { font-weight: normal; } info .flash-icon { display: block; position: absolute; top: 11px; right: 12px; }
    78. 78. messaging.css.flash-info { .flash-success { .flash-error { position: relative; position: relative; position: relative; margin: 0 auto 15px; margin: 0 auto 15px; margin: 0 auto 15px; width: 435px; width: 435px; width: 435px; background: #a4a4a4; background: #1b942a; background: #ef9000; border-radius: 5px; border-radius: 5px; border-radius: 5px; padding: 10px 50px 10px 15px; padding: 10px 50px 10px 15px; padding: 10px 50px 10px 15px; color: white; color: white; color: white; font-weight: bold; font-weight: bold; font-weight: bold; text-shadow: 0 -1px #838484; text-shadow: 0 -1px #1a7e1c; text-shadow: 0 -1px #e8541c;} } } .flash-error li { font-weight: normal; success } .flash-icon { display: block; position: absolute; top: 11px; right: 12px; }
    79. 79. messaging.css error.flash-info { .flash-success { .flash-error { position: relative; position: relative; position: relative; margin: 0 auto 15px; margin: 0 auto 15px; margin: 0 auto 15px; width: 435px; width: 435px; width: 435px; background: #a4a4a4; background: #1b942a; background: #ef9000; border-radius: 5px; border-radius: 5px; border-radius: 5px; padding: 10px 50px 10px 15px; padding: 10px 50px 10px 15px; padding: 10px 50px 10px 15px; color: white; color: white; color: white; font-weight: bold; font-weight: bold; font-weight: bold; text-shadow: 0 -1px #838484; text-shadow: 0 -1px #1a7e1c; text-shadow: 0 -1px #e8541c;} } } .flash-error li { font-weight: normal; } .flash-icon { display: block; position: absolute; top: 11px; right: 12px; }
    80. 80. messaging.css.flash-info { .flash-success { .flash-error { position: relative; position: relative; position: relative; margin: 0 auto 15px; margin: 0 auto 15px; margin: 0 auto 15px; width: 435px; width: 435px; width: 435px; background: #a4a4a4; background: #1b942a; background: #ef9000; border-radius: 5px; border-radius: 5px; border-radius: 5px; padding: 10px 50px 10px 15px; padding: 10px 50px 10px 15px; padding: 10px 50px 10px 15px; color: white; color: white; color: white; font-weight: bold; font-weight: bold; font-weight: bold; text-shadow: 0 -1px #838484; text-shadow: 0 -1px #1a7e1c; text-shadow: 0 -1px #e8541c;} } } .flash-error li { error items } font-weight: normal; .flash-icon { display: block; position: absolute; top: 11px; right: 12px; }
    81. 81. messaging.css.flash-info { .flash-success { .flash-error { position: relative; position: relative; position: relative; margin: 0 auto 15px; margin: 0 auto 15px; margin: 0 auto 15px; width: 435px; width: 435px; width: 435px; background: #a4a4a4; background: #1b942a; background: #ef9000; border-radius: 5px; border-radius: 5px; border-radius: 5px; padding: 10px 50px 10px 15px; padding: 10px 50px 10px 15px; padding: 10px 50px 10px 15px; color: white; color: white; color: white; font-weight: bold; font-weight: bold; font-weight: bold; text-shadow: 0 -1px #838484; text-shadow: 0 -1px #1a7e1c; text-shadow: 0 -1px #e8541c;} } } .flash-error li { font-weight: normal; } .flash-icon { display: block; icon position: absolute; top: 11px; right: 12px; }
    82. 82. reset.csshtml,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,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,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,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}aimg{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}
    83. 83. reset.csshtml,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,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,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,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}aimg{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block} Eric Meyer’s Reset
    84. 84. reset.csshtml,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,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,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,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}aimg{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}• Browsers have a default style sheet Eric Meyer’s Reset
    85. 85. reset.csshtml,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,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,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,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}aimg{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}• Browsers have a default style sheet Eric Meyer’s Reset• Browser style sheets are different
    86. 86. reset.csshtml,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,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,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,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}aimg{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}• Browsers have a default style sheet Eric Meyer’s Reset• Browser style sheets are different• A reset style sheet overrides default browser styles
    87. 87. Add Compass to project ~
    88. 88. Add Compass to project ~ cd sass-why ~/sass-why
    89. 89. Add Compass to project ~ cd sass-why ~/sass-why compass create ~/sass-why
    90. 90. Add Compass to project
    91. 91. Add Compass to project Compass configuration file
    92. 92. Add Compass to project Compass configuration file
    93. 93. Add Compass to project Sass files (SCSS syntax)
    94. 94. Add Compass to project CSS compiled from Sass files
    95. 95. Add Compass to project
    96. 96. Add Compass to project
    97. 97. Add Compass to project
    98. 98. Add Compass to project
    99. 99. Add Compass to project
    100. 100. Add Compass to project ~ cd sass-why ~/sass-why compass create ~/sass-why
    101. 101. Add Compass to project ~ cd sass-why ~/sass-why compass create ~/sass-why compass compile create stylesheets/messaging.css create stylesheets/reset.css ~/sass-why
    102. 102. messaging.html<!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>
    103. 103. messaging.html<!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"> ••• update links <div class="flash-error"> •••</body></html>
    104. 104. messaging.html<!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"> ••• update links <div class="flash-error"> •••</body></html>
    105. 105. Let’s abstract a little more.
    106. 106. @import (in Sass)
    107. 107. @import (in Sass)• not during page render in browser like in CSS
    108. 108. @import (in Sass)• not during page render in browser like in CSS• when compiling Sass to CSS
    109. 109. @import (in Sass)• not during page render in browser like in CSS• when compiling Sass to CSS• organize your styles into logical partials
    110. 110. @import (in Sass)• 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
    111. 111. @import (in Sass)• 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
    112. 112. messaging.html<!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>
    113. 113. messaging.html<!DOCTYPE html><html> remove these<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>
    114. 114. messaging.html<!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"> ••• add screen.css <div class="flash-success"> ••• <div class="flash-error"> •••</body></html>
    115. 115. Remove reset and compiled css
    116. 116. rename to screen.scss
    117. 117. rename to screen.scss
    118. 118. create two partials
    119. 119. create two partials
    120. 120. _layout.scssbody { background: #e3e3e3; margin: 20px; layout font: 16px/24px sans-serif;}ul { list-style: disc; margin-left: 20px; prose}
    121. 121. _messaging.scss.flash-info { .flash-success { .flash-error { position: relative; position: relative; position: relative; margin: 0 auto 15px; margin: 0 auto 15px; margin: 0 auto 15px; width: 435px; width: 435px; width: 435px; background: #a4a4a4; background: #1b942a; background: #ef9000; border-radius: 5px; border-radius: 5px; border-radius: 5px; padding: 10px 50px 10px 15px; padding: 10px 50px 10px 15px; padding: 10px 50px 10px 15px; color: white; color: white; color: white; font-weight: bold; font-weight: bold; font-weight: bold; text-shadow: 0 -1px #838484; text-shadow: 0 -1px #1a7e1c; text-shadow: 0 -1px #e8541c;} } } .flash-error li { font-weight: normal; } .flash-icon { display: block; position: absolute; top: 11px; right: 12px; }
    122. 122. screen.scss
    123. 123. screen.scss@import "layout";
    124. 124. screen.scss@import "layout";@import "messaging";
    125. 125. screen.scss@import "compass/reset";@import "layout";@import "messaging";
    126. 126. screen.scss@import "compass/reset";@import "layout";@import "messaging"; Let’s compile
    127. 127. screen.scss@import "compass/reset";@import "layout";@import "messaging"; Compass doesn’t compile partials
    128. 128. @extend
    129. 129. @extendWhen one element should have all the styles of another,plus its own styles.
    130. 130. _messaging.scss.flash-info { .flash-success { .flash-error { position: relative; position: relative; position: relative; margin: 0 auto 15px; margin: 0 auto 15px; margin: 0 auto 15px; width: 435px; width: 435px; width: 435px; background: #a4a4a4; background: #1b942a; background: #ef9000; border-radius: 5px; border-radius: 5px; border-radius: 5px; padding: 10px 50px 10px 15px; padding: 10px 50px 10px 15px; padding: 10px 50px 10px 15px; color: white; color: white; color: white; font-weight: bold; font-weight: bold; font-weight: bold; text-shadow: 0 -1px #838484; text-shadow: 0 -1px #1a7e1c; text-shadow: 0 -1px #e8541c;} } } .flash-error li { font-weight: normal; } .flash-icon { display: block; position: absolute; top: 11px; right: 12px; }
    131. 131. _messaging.scss.flash-info { .flash-success { .flash-error { position: relative; position: relative; position: relative; margin: 0 auto 15px; margin: 0 auto 15px; margin: 0 auto 15px; width: 435px; width: 435px; width: 435px; background: #a4a4a4; background: #1b942a; background: #ef9000; border-radius: 5px; border-radius: 5px; border-radius: 5px; padding: 10px 50px 10px 15px; padding: 10px 50px 10px 15px; padding: 10px 50px 10px 15px; color: white; color: white; color: white; font-weight: bold; font-weight: bold; font-weight: bold; text-shadow: 0 -1px #838484; text-shadow: 0 -1px #1a7e1c; text-shadow: 0 -1px #e8541c;} } } .flash-error li { font-weight: normal; } .flash-icon { unique style declarations display: block; position: absolute; top: 11px; right: 12px; }
    132. 132. _messaging.scss.flash-info, .flash-info { .flash-icon {.flash-success, background: #a4a4a4; display: block;.flash-error { text-shadow: 0 -1px #838484; position: absolute; position: relative; } top: 11px; margin: 0 auto 15px; right: 12px; width: 435px; .flash-success { } border-radius: 5px; background: #1b942a; padding: 10px 50px 10px 15px; text-shadow: 0 -1px #1a7e1c; color: white; } font-weight: bold;} .flash-error { background: #ef9000; text-shadow: 0 -1px #e8541c; } .flash-error li { font-weight: normal; }
    133. 133. _messaging.scss.flash-info, .flash-info { .flash-icon {.flash-success, background: #a4a4a4; display: block;.flash-error { text-shadow: 0 -1px #838484; position: absolute; position: relative; } top: 11px; margin: 0 auto 15px; right: 12px; width: 435px; .flash-success { } border-radius: 5px; background: #1b942a; padding: 10px 50px 10px 15px; text-shadow: 0 -1px #1a7e1c; color: white; } font-weight: bold;} .flash-error { background: #ef9000; text-shadow: 0 -1px #e8541c; } .flash-error li { font-weight: normal; }
    134. 134. _messaging.scss.flash-message { .flash-info { .flash-icon { position: relative; background: #a4a4a4; display: block; margin: 0 auto 15px; text-shadow: 0 -1px #838484; position: absolute; width: 435px; } top: 11px; border-radius: 5px; right: 12px; padding: 10px 50px 10px 15px; .flash-success { } color: white; background: #1b942a; font-weight: bold; text-shadow: 0 -1px #1a7e1c;} } .flash-error { background: #ef9000; text-shadow: 0 -1px #e8541c; } .flash-error li { font-weight: normal; }
    135. 135. _messaging.scss.flash-message { .flash-info { .flash-icon { position: relative; background: #a4a4a4; display: block; margin: 0 auto 15px; text-shadow: 0 -1px #838484; position: absolute; width: 435px; } top: 11px; border-radius: 5px; right: 12px; padding: 10px 50px 10px 15px; .flash-success { } color: white; background: #1b942a; font-weight: bold; text-shadow: 0 -1px #1a7e1c;} } .flash-error { background: #ef9000; text-shadow: 0 -1px #e8541c; } .flash-error li { font-weight: normal; }
    136. 136. _messaging.scss.flash-message { .flash-info { .flash-icon { position: relative; @extend .flash-message; display: block; margin: 0 auto 15px; background: #a4a4a4; position: absolute; width: 435px; text-shadow: 0 -1px #838484; top: 11px; border-radius: 5px; } right: 12px; padding: 10px 50px 10px 15px; } color: white; .flash-success { font-weight: bold; @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; }
    137. 137. _messaging.scss.flash-message { .flash-info { .flash-icon { position: relative; @extend .flash-message; display: block; margin: 0 auto 15px; background: #a4a4a4; position: absolute; width: 435px; text-shadow: 0 -1px #838484; top: 11px; border-radius: 5px; } right: 12px; padding: 10px 50px 10px 15px; } color: white; .flash-success { font-weight: bold; @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; }
    138. 138. Generated CSS.flash-message, .flash-info { .flash-icon {.flash-info, background: #a4a4a4; display: block;.flash-success, text-shadow: 0 -1px #838484; position: absolute;.flash-error { } top: 11px; position: relative; right: 12px; margin: 0 auto 15px; .flash-success { } width: 435px; background: #1b942a; border-radius: 5px; text-shadow: 0 -1px #1a7e1c; padding: 10px 50px 10px 15px; } color: white; font-weight: bold; .flash-error {} background: #ef9000; text-shadow: 0 -1px #e8541c; } .flash-error li { font-weight: normal; }
    139. 139. Nesting
    140. 140. Nesting• group styles together
    141. 141. Nesting• group styles together• avoid duplication of selectors
    142. 142. Nesting• group styles together• avoid duplication of selectors• keep your code DRY
    143. 143. Nesting• group styles together• avoid duplication of selectors• keep your code DRYSass nesting ≠ html structure
    144. 144. Nesting FASTER• group styles together• avoid duplication of selectors TRAFFIC• keep your code DRY KEEPSass nesting ≠ html structure LEFT
    145. 145. Warning about Nesting
    146. 146. 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
    147. 147. Warning about Nesting
    148. 148. 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; }
    149. 149. _messaging.scss.flash-message { .flash-info { .flash-icon { position: relative; @extend .flash-message; display: block; margin: 0 auto 15px; background: #a4a4a4; position: absolute; width: 435px; text-shadow: 0 -1px #838484; top: 11px; border-radius: 5px; } right: 12px; padding: 10px 50px 10px 15px; } color: white; .flash-success { font-weight: bold; @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; }
    150. 150. _messaging.scss.flash-message { .flash-info { .flash-icon { position: relative; @extend .flash-message; display: block; margin: 0 auto 15px; background: #a4a4a4; position: absolute; width: 435px; text-shadow: 0 -1px #838484; top: 11px; border-radius: 5px; } right: 12px; padding: 10px 50px 10px 15px; } color: white; .flash-success { font-weight: bold; @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; }
    151. 151. _messaging.scss.flash-message { .flash-info { .flash-icon { position: relative; @extend .flash-message; display: block; margin: 0 auto 15px; background: #a4a4a4; position: absolute; width: 435px; text-shadow: 0 -1px #838484; top: 11px; border-radius: 5px; } right: 12px; padding: 10px 50px 10px 15px; } color: white; .flash-success { font-weight: bold; @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; } }
    152. 152. _messaging.scss.flash-message { .flash-info { .flash-icon { position: relative; @extend .flash-message; display: block; margin: 0 auto 15px; background: #a4a4a4; position: absolute; width: 435px; text-shadow: 0 -1px #838484; top: 11px; border-radius: 5px; } right: 12px; padding: 10px 50px 10px 15px; } color: white; .flash-success { font-weight: bold; @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; } }
    153. 153. _messaging.scss.flash-message { .flash-info { .flash-icon { position: relative; @extend .flash-message; display: block; margin: 0 auto 15px; background: #a4a4a4; position: absolute; width: 435px; text-shadow: 0 -1px #838484; top: 11px; border-radius: 5px; } right: 12px; padding: 10px 50px 10px 15px; } color: white; .flash-success { font-weight: bold; @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; } }
    154. 154. .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-icon { display: block;.flash-success { position: absolute; background: #1b942a; top: 11px; text-shadow: 0 -1px #1a7e1c; } right: 12px; }.flash-error { background: #ef9000; text-shadow: 0 -1px #e8541c; } .flash-error li { font-weight: normal; } screen.css
    155. 155. .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-icon { display: block;.flash-success { position: absolute; background: #1b942a; top: 11px; text-shadow: 0 -1px #1a7e1c; } right: 12px; }.flash-error { background: #ef9000; text-shadow: 0 -1px #e8541c; } .flash-error li { font-weight: normal; } output_style = :nested screen.css
    156. 156. .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-icon { display: block;.flash-success { position: absolute; background: #1b942a; top: 11px; text-shadow: 0 -1px #1a7e1c; } right: 12px; }.flash-error { background: #ef9000; text-shadow: 0 -1px #e8541c; } .flash-error li { font-weight: normal; } output_style = :nested screen.css
    157. 157. .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; } output_style.flash-info { background: #a4a4a4; text-shadow: 0 -1px #838484; } .flash-icon { display: block;.flash-success { position: absolute; background: #1b942a; top: 11px; text-shadow: 0 -1px #1a7e1c; } right: 12px; }.flash-error { background: #ef9000; text-shadow: 0 -1px #e8541c; } .flash-error li { font-weight: normal; } output_style = :nested screen.css
    158. 158. .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; .flash-icon { text-shadow: 0 -1px #838484; display: block;} position: absolute; top: 11px;.flash-success { right: 12px; background: #1b942a; } text-shadow: 0 -1px #1a7e1c;}.flash-error { background: #ef9000; text-shadow: 0 -1px #e8541c; output_style = :expanded screen.css}.flash-error li { font-weight: normal;}
    159. 159. .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 screen.css
    160. 160. .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 screen.css
    161. 161. SCSS to Sass
    162. 162. _messaging.scss.flash-message { .flash-info { .flash-icon { position: relative; @extend .flash-message; display: block; margin: 0 auto 15px; background: #a4a4a4; position: absolute; width: 435px; text-shadow: 0 -1px #838484; top: 11px; border-radius: 5px; } right: 12px; padding: 10px 50px 10px 15px; } color: white; .flash-success { font-weight: bold; @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; } }
    163. 163. _messaging.sass.flash-message .flash-info .flash-icon position: relative @extend .flash-message display: block margin: 0 auto 15px; background: #a4a4a4 position: absolute width: 435px; text-shadow: 0 -1px #838484 top: 11px border-radius: 5px right: 12px padding: 10px 50px 10px 15px .flash-success color: white @extend .flash-message font-weight: bold background: #1b942a text-shadow: 0 -1px #1a7e1c .flash-error @extend .flash-message background: #ef9000 text-shadow: 0 -1px #e8541c li font-weight: normal
    164. 164. _messaging.sass.flash-message .flash-info .flash-icon position: relative @extend .flash-message display: block margin: 0 auto 15px; background: #a4a4a4 position: absolute width: 435px; text-shadow: 0 -1px #838484 top: 11px border-radius: 5px right: 12px padding: 10px 50px 10px 15px .flash-success color: white @extend .flash-message font-weight: bold background: #1b942a text-shadow: 0 -1px #1a7e1c .flash-error @extend .flash-message background: #ef9000 text-shadow: 0 -1px #e8541c li font-weight: normal
    165. 165. screen.scss@import "compass/reset";@import "layout";@import "messaging";
    166. 166. screen.scss@import "compass/reset";@import "layout";@import "messaging"; @import supports both syntaxes, no changes here
    167. 167. screen.sass@import compass/reset@import layout@import messaging
    168. 168. screen.sass@import compass/reset@import layout@import messaging semicolons removed, quotes optional
    169. 169. $variables
    170. 170. $variables• containers for values
    171. 171. $variables• containers for values• variable name define the purpose of values
    172. 172. $variables• containers for values• variable name define the purpose of values• Five value types in Sass:
    173. 173. $variables• containers for values• variable name define the purpose of values• Five value types in Sass: • numbers: 5, 8.2, 99%, 20px
    174. 174. $variables• 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”
    175. 175. $variables• 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)
    176. 176. $variables• 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
    177. 177. $variables• 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
    178. 178. _messaging.sass.flash-message .flash-info .flash-icon position: relative @extend .flash-message display: block margin: 0 auto 15px background: #a4a4a4 position: absolute width: 435px text-shadow: 0 -1px #838484 top: 11px border-radius: 5px right: 12px padding: 10px 50px 10px 15px .flash-success color: white @extend .flash-message font-weight: bold background: #1b942a text-shadow: 0 -1px #1a7e1c .flash-error @extend .flash-message background: #ef9000 text-shadow: 0 -1px #e8541c li font-weight: normal
    179. 179. _messaging.sass.flash-message .flash-info position: relative @extend .flash-message margin: 0 auto 15px background: #a4a4a4 width: 435px text-shadow: 0 -1px #838484 border-radius: 5px padding: 10px 50px 10px 15px .flash-success color: white @extend .flash-message font-weight: bold background: #1b942a text-shadow: 0 -1px #1a7e1c.flash-icon display: block .flash-error position: absolute @extend .flash-message top: 11px background: #ef9000 right: 12px text-shadow: 0 -1px #e8541c li font-weight: normal
    180. 180. _messaging.sass.flash-message .flash-info position: relative @extend .flash-message margin: 0 auto 15px background: #a4a4a4 width: 435px text-shadow: 0 -1px #838484 border-radius: 5px padding: 10px 50px 10px 15px .flash-success color: white @extend .flash-message font-weight: bold background: #1b942a text-shadow: 0 -1px #1a7e1c.flash-icon display: block .flash-error position: absolute @extend .flash-message top: 11px background: #ef9000 right: 12px text-shadow: 0 -1px #e8541c li font-weight: normal
    181. 181. _messaging.sass$flash-info-background: #a4a4a4 .flash-info$flash-info-text-shadow: #838484 @extend .flash-message$flash-success-background: #1b942a background: #a4a4a4$flash-success-text-shadow: #1a7e1c text-shadow: 0 -1px #838484$flash-error-background: #ef9000$flash-error-text-shadow: #e8541c .flash-success @extend .flash-message.flash-message background: #1b942a position: relative text-shadow: 0 -1px #1a7e1c margin: 0 auto 15px width: 435px .flash-error border-radius: 5px @extend .flash-message padding: 10px 50px 10px 15px background: #ef9000 color: white text-shadow: 0 -1px #e8541c font-weight: bold li font-weight: normal.flash-icon display: block position: absolute top: 11px right: 12px
    182. 182. _messaging.sass$flash-info-background: #a4a4a4 .flash-info$flash-info-text-shadow: #838484 @extend .flash-message$flash-success-background: #1b942a background: $flash-info-background$flash-success-text-shadow: #1a7e1c text-shadow: 0 -1px $flash-info-text-shadow$flash-error-background: #ef9000$flash-error-text-shadow: #e8541c .flash-success @extend .flash-message.flash-message background: $flash-success-background position: relative text-shadow: 0 -1px $flash-success-text-shadow margin: 0 auto 15px width: 435px .flash-error border-radius: 5px @extend .flash-message padding: 10px 50px 10px 15px background: $flash-error-background color: white text-shadow: 0 -1px $flash-error-text-shadow font-weight: bold li font-weight: normal.flash-icon display: block position: absolute top: 11px right: 12px
    183. 183. _messaging.sass$flash-info-background: #a4a4a4 .flash-info$flash-info-text-shadow: #838484 @extend .flash-message$flash-success-background: #1b942a background: $flash-info-background$flash-success-text-shadow: #1a7e1c text-shadow: 0 -1px $flash-info-text-shadow$flash-error-background: #ef9000$flash-error-text-shadow: #e8541c .flash-success @extend .flash-message.flash-message background: $flash-success-background position: relative text-shadow: 0 -1px $flash-success-text-shadow margin: 0 auto 15px width: 435px .flash-error border-radius: 5px @extend .flash-message padding: 10px 50px 10px 15px background: $flash-error-background color: white text-shadow: 0 -1px $flash-error-text-shadow font-weight: bold li font-weight: normal.flash-icon display: block position: absolute top: 11px right: 12px
    184. 184. _messaging.sass.flash-message .flash-info position: relative @extend .flash-message margin: 0 auto 15px background: $flash-info-background width: 435px text-shadow: 0 -1px $flash-info-text-shadow border-radius: 5px padding: 10px 50px 10px 15px .flash-success color: white @extend .flash-message font-weight: bold background: $flash-success-background text-shadow: 0 -1px $flash-success-text-shadow.flash-icon display: block .flash-error position: absolute @extend .flash-message top: 11px background: $flash-error-background right: 12px text-shadow: 0 -1px $flash-error-text-shadow li font-weight: normal
    185. 185. _config.sass partialSet all your site-wide values here.
    186. 186. _config.sass
    187. 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
    188. 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
    189. 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 config@import compass/reset@import layout@import messaging
    190. 190. Math
    191. 191. MathJust like in algebra class, show your work.
    192. 192. MathJust like in algebra class, show your work.• Replace arbitrary numbers with calculations.
    193. 193. MathJust like in algebra class, show your work.• Replace arbitrary numbers with calculations.• Control your grid styles
    194. 194. MathJust like in algebra class, show your work.• Replace arbitrary numbers with calculations.• Control your grid styles• Document logic in your styles
    195. 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
    196. 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
    197. 197. _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
    198. 198. _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
    199. 199. _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: 435px border-radius: 5px padding: 10px 50px 10px 15px color: white font-weight: bold
    200. 200. _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
    201. 201. _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
    202. 202. @mixin(argument)A reusable block of content, usually with arguments.
    203. 203. _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
    204. 204. _messaging.sass.flash-info @extend .flash-message background: $flash-info-background see 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
    205. 205. _messaging.sass.flash-info @extend .flash-message background: $flash-info-background see text-shadow: 0 -1px $flash-info-text-shadow.flash-success @extend .flash-message background: $flash-success-background the 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
    206. 206. _messaging.sass.flash-info @extend .flash-message background: $flash-info-background see text-shadow: 0 -1px $flash-info-text-shadow.flash-success @extend .flash-message background: $flash-success-background the 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 pattern? li font-weight: normal
    207. 207. _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
    208. 208. _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@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)
    209. 209. _messaging.sass=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+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)
    210. 210. SpritesSurprisingly simple with Compass
    211. 211. SpritesSurprisingly simple with Compass error.png
    212. 212. SpritesSurprisingly simple with Compass error.png info.png
    213. 213. SpritesSurprisingly simple with Compass error.png info.png success.png
    214. 214. SpritesSurprisingly simple with Compass error.png info.png success.png
    215. 215. SpritesSurprisingly simple with Compass error.png info.png icon-s5c33447329.png success.png
    216. 216. create folder of images to sprite
    217. 217. place images in folder
    218. 218. simplify filenames
    219. 219. _messaging.sass.flash-icon display: block position: absolute top: 11px right: 12px
    220. 220. _messaging.sass.icon-sprite display: block position: absolute top: 11px right: 12px
    221. 221. _messaging.sass.icon-sprite display: block position: absolute top: 11px right: 12px@import "icon/*.png"+all-icon-sprites
    222. 222. _messaging.sass.icon-sprite display: block position: absolute top: 11px right: 12px$icon-sprite-dimensions: true@import "icon/*.png"+all-icon-sprites
    223. 223. _messaging.sass.icon-sprite display: block position: absolute top: 11px right: 12px$icon-sprite-dimensions: true@import "icon/*.png"+all-icon-sprites
    224. 224. _messaging.sass.icon-sprite display: block Compass config file position: absolute top: 11px right: 12px$icon-sprite-dimensions: true@import "icon/*.png"+all-icon-sprites
    225. 225. _messaging.sass.icon-sprite display: block Compass config file position: absolute top: 11px right: 12px$icon-sprite-dimensions: true@import "icon/*.png"+all-icon-sprites 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

    ×