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

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
6. Syntactically
7. Syntactically Awesome
8. Syntactically Awesome Style
9. Syntactically Awesome Style Sheets
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
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
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…
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; }
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
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
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
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>
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; }
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
296. Advanced nesting Parent Selector
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
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.
316. Learn more theSassWay.com compass-style.org sass-lang.com Slides? bit.ly/sass-why Questions? hit me up… @beau