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

1. Sass Why
for intro to Sass for CSSGuy
An
the 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. Sass
• CSS meta-language

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

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

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

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

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

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. Two delicous flavors…
Sass and SCSS

27. Two delicous flavors…
Sass and SCSS

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

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

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

31. 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

32. 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

33. 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

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

36. CSS SCSS
nav { 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; }
} }

37. CSS SCSS
nav { 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; }
} }

38. CSS SCSS
nav { 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; }
} }

39. CSS SCSS
nav { 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; }
} }

40. CSS SCSS
nav { 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

41. CSS SCSS
nav { 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

42. CSS SCSS
nav { 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; }
} }

43. CSS SCSS
nav { 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; }}}

44. CSS SCSS
nav { 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; }
} }

45. CSS SCSS Sass
nav { nav { nav
background: #ccc; background: #ccc; background: #ccc
width: 500px; width: 500px; width: 500px
margin: 10px auto; margin: 10px auto; margin: 10px auto
} a { a
nav 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: #000
nav a:hover { }
color: #000; }
} }

46. CSS SCSS Sass
nav { nav { nav
background: #ccc; background: #ccc; background: #ccc
width: 500px; width: 500px; width: 500px
margin: 10px auto; margin: 10px auto; margin: 10px auto
} a { a
nav 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: #000
nav a:hover { }
color: #000; }
} }

47. CSS SCSS Sass
nav { nav { nav
background: #ccc; background: #ccc; background: #ccc
width: 500px; width: 500px; width: 500px
margin: 10px auto; margin: 10px auto; margin: 10px auto
} a { a
nav 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: #000
nav a:hover { }
color: #000; }
} }

48. CSS SCSS Sass
nav { nav { nav
background: #ccc; background: #ccc; background: #ccc
width: 500px; width: 500px; width: 500px
margin: 10px auto; margin: 10px auto; margin: 10px auto
} a { a
nav 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: #000
nav a:hover { }
color: #000; }
} }

50. Advantages of each…
SCSS Sass

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

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

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

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

55. 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

56. 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

57. 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

58. 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

59. 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

60. 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

61. 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

62. 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

63. 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

64. 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

65. 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

66. 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

67. 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

68. 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

69. 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
Try both …you may want to use both.

70. Sass SCSS

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

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

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

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

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

76. 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>

77. 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>

78. 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>

79. 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>

80. 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>

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

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

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

84. 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;
}

85. 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;
}

86. 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;
}

87. 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;
}

88. 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;
}

89. 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;
}

90. reset.css
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:aft
er{content:none}a
img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,s
ection,summary{display:block}

91. reset.css
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:aft
er{content:none}a
img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,s
ection,summary{display:block}
Eric Meyer’s Reset

92. reset.css
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:aft
er{content:none}a
img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,s
ection,summary{display:block}
• Browsers have a default style sheet Eric Meyer’s Reset

93. reset.css
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:aft
er{content:none}a
img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,s
ection,summary{display:block}
• Browsers have a default style sheet Eric Meyer’s Reset
• Browser style sheets are different

94. reset.css
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:aft
er{content:none}a
img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,s
ection,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

95. Add Compass to project
~

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

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

98. Add Compass to project

99. Add Compass to project
Compass configuration file

100. Add Compass to project
Compass configuration file

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

102. Add Compass to project
CSS compiled from Sass files

103. Add Compass to project

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
~ cd sass-why
~/sass-why compass create
~/sass-why

109. 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

110. 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>

111. 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>

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"> •••
update links
<div class="flash-error"> •••
</body>
</html>

114. Let’s abstract a little more.

115. @import (in Sass)

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

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

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

119. @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

120. @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

121. 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>

122. 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>

123. 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>

124. Remove reset and compiled css

126. rename to screen.scss

127. rename to screen.scss

128. create two partials

129. create two partials

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

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 {
display: block;
position: absolute;
top: 11px;
right: 12px;
}

132. screen.scss

133. screen.scss
@import "layout";

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

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

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

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

138. @extend

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

140. _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;
}

141. _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;
}

142. _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;
}

143. _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;
}

144. _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;
}

145. _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;
}

146. _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;
}

147. _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;
}

148. 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;
}

149. Nesting

150. Nesting
• group styles together

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

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

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

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

155. Warning about Nesting

156. 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

157. Warning about Nesting

158. 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; }

159. _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;
}

160. _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;
}

161. _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;
}
}

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;
.flash-error li {
font-weight: normal;
}
}

163. _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;
}
}

164. .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

165. .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

166. .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

167. .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

168. .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;
}

169. .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

170. .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

171. SCSS to Sass

172. _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;
}
}

173. _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

174. _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

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

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

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

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

179. $variables

180. $variables
• containers for values

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

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

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

184. $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”

185. $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)

186. $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

187. $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

188. _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

189. _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

190. _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

191. _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

192. _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

193. _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

194. _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

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

196. _config.sass

197. _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

198. _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

199. _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

200. Math

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

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

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

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

205. _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

206. _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

207. _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

208. _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

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

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

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

212. @mixin(argument)
A reusable block of content, usually with arguments.

213. _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

214. _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

215. _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

216. _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

217. _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

218. _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)

219. _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)

220. Sprites
Surprisingly simple with Compass

221. Sprites
Surprisingly simple with Compass
error.png

222. Sprites
Surprisingly simple with Compass
error.png
info.png

223. Sprites
Surprisingly simple with Compass
error.png
info.png
success.png

224. Sprites
Surprisingly simple with Compass
error.png
info.png
success.png

225. Sprites
Surprisingly simple with Compass
error.png
info.png icon-s5c33447329.png
success.png

227. create folder of images to sprite

228. place images in folder

229. simplify filenames

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

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

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

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

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

235. _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

236. _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

237. _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

238. _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

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

240. 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 { .icon-info { .icon-success {
background-position: 0 0; background-position: 0 -19px; background-position: 0 -40px;
height: 19px; height: 21px; height: 21px;
width: 20px; } width: 20px; } width: 20px; }