Sass is an extension of CSS3 that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. (With a little help from Ruby) This talk will cover an overview of what Sass is, how to get it, run it, and use it, and show some examples of its magic. Code examples at: https://github.com/founddrama/vt-code-camp

1. Wrangling the CSS
Beast with Sass
by Rob Friesel

2. Who is this guy?

3. Who is this guy?
Sr. User Interface Developer
at Dealer.com Websystems
out there on the web:
@founddrama
blog.founddrama.net
github.com/founddrama

4. Sass: what the heck is that?

5. Sass: what the heck is that?
“Syntactically Awesome Style Sheets” - sass-lang.com

6. Sass: what the heck is that?
“Syntactically Awesome Style Sheets” - sass-lang.com
created by Hampton Catlin
Nathan Weizenbaum, primary designer
& lead developer
Chris Eppstein, core contributor &
creator of Compass

7. Sass: what the heck is that?
“Syntactically Awesome Style Sheets” - sass-lang.com
Sass/SCSS is a CSS meta-language written in Ruby
a super-set of CSS
all CSS is valid Sass
Sass/SCSS compiles to CSS

8. In other words: it fixes CSS

9. In other words: it fixes CSS
“But CSS is perfect, right?
What could you possibly
want to add?”

10. CSS problems

11. CSS problems
repetitive

12. CSS problems
repetitive
repetitive

13. CSS problems
repetitive
repetitive
not expressive

14. CSS problems
repetitive
repetitive
not expressive
no variables

15. CSS problems
repetitive
repetitive
not expressive
no variables
no functions, no calculations, no inheritance, etc.

16. CSS3 to the rescue?

17. CSS3 to the rescue?
Not really

18. CSS3 to the rescue?
Not really
some new properties

19. CSS3 to the rescue?
Not really
some new properties
some new values

20. CSS3 to the rescue?
Not really
some new properties
some new values
no new syntax

21. CSS3 Sass to the rescue

22. What Sass offers
variables conditionals
selector inheritance loops
mixins syntax validation
calculations and more

23. Getting Sass

24. Getting Sass
$ gem install sass
* requires Ruby
download source/contribute:
github.com/nex3/sass

25. “OK, I’ve got it.
Now what?”

26. baby steps
CSS is Sass
and Sass (SCSS) compiles to CSS

27. baby steps
CSS is Sass
and Sass (SCSS) compiles to CSS
$ mv my.css my.scss
$ sass my.scss:my.css

28. 10 things to love
about Sass
* inspired by blog.founddrama.net/2010/08/10-things-i-love-about-sass/
** play along at home: https://github.com/founddrama/vt-code-camp

29. #1 : Variables

30. #1 : Variables
/**
* Why find/replace in CSS
* files doesn't work:
*/
h1#masthead {
color: #f00;
}
.post‐hd {
color: #ff0000;
}
a.outbound‐link {
color: red;
}
.sidebar p {
color: rgba(255, 0, 0, 1);
}

31. #1 : Variables
/** // Sass to the rescue
* Why find/replace in CSS
* files doesn't work: $highlight: #ff0000;
*/
h1#masthead { h1#masthead {
color: #f00; color: $highlight;
} }
.post‐hd { .post‐hd {
color: #ff0000; color: $highlight;
} }
a.outbound‐link { a.outbound‐link {
color: red; color: $highlight;
} }
.sidebar p { .sidebar p {
color: rgba(255, 0, 0, 1); color: $highlight;
} }

32. #1 : Variables

33. #1 : Variables

34. #1 : Variables
$theme_accent: #771100;
$theme_bg: #222222;
#container {
h1, h2, h3 { color: $theme_accent; }
.post {
$accent_border: 1px $theme_accent;
$dark_border: 1px $theme_bg;
border: {
top: $accent_border;
left: $accent_border;
bottom: $dark_border;
right: $dark_border;
}
}
}

35. #2 : Nesting (selectors)

36. #2 : Nesting (selectors)
.post code,
.post pre,
.post .source {
font‐family: "Inconsolata", Courier, monospace;
}

37. #2 : Nesting (selectors)
.post code,
.post pre,
.post .source {
font‐family: "Inconsolata", Courier, monospace;
}
.post {
code, pre, .source {
font‐family: "Inconsolata", Courier, monospace;
}
}

38. #3 : Nesting (properties)

39. #3 : Nesting (properties)
.styled‐text {
font‐family: "Georgia", Times, serif;
font‐style: oblique;
font‐size: 2em;
}

40. #3 : Nesting (properties)
.styled‐text {
font‐family: "Georgia", Times, serif;
font‐style: oblique;
font‐size: 2em;
}
.styled‐text {
font: {
family: "Georgia", Times, serif;
style: oblique;
size: 2em;
}
}

41. #4 : Mixins

42. #4 : Mixins
@mixin rounded‐top($radius: 10px) {
$side: top;
‐moz‐border‐radius: {
#{$side}left: $radius;
#{$side}right: $radius;
}
‐webkit‐border‐#{$side}: {
left‐radius: $radius;
right‐radius: $radius;
}
border‐#{$side}: {
left‐radius: $radius;
right‐radius: $radius;
}
}
.section‐hd { @include rounded‐top; }
.tab { @include rounded‐top(4px); }

43. #4 : Mixins
@mixin rounded‐top($radius: 10px) {
.section‐hd {
$side: top;
‐moz‐border‐radius‐topleft: 10px;
‐moz‐border‐radius: {
‐moz‐border‐radius‐topright: 10px;
#{$side}left: $radius;
‐webkit‐border‐top‐left‐radius: 10px;
#{$side}right: $radius;
‐webkit‐border‐top‐right‐radius: 10px;
}
border‐top‐left‐radius: 10px;
‐webkit‐border‐#{$side}: {
border‐top‐right‐radius: 10px;
} left‐radius: $radius;
right‐radius: $radius;
}
border‐#{$side}: {
.tab {
left‐radius: $radius;
‐moz‐border‐radius‐topleft: 4px;
right‐radius: $radius;
‐moz‐border‐radius‐topright: 4px;
}
‐webkit‐border‐top‐left‐radius: 4px;
}
‐webkit‐border‐top‐right‐radius: 4px;
border‐top‐left‐radius: 4px;
.section‐hd { @include rounded‐top; }
border‐top‐right‐radius: 4px;
.tab { @include rounded‐top(4px); }
}

44. #4 : Mixins
@mixin rounded‐top($radius: 10px) { .section‐hd {
$side: top; ‐moz‐border‐radius‐topleft: 10px;
‐moz‐border‐radius: { ‐moz‐border‐radius‐topright: 10px;
#{$side}left: $radius; ‐webkit‐border‐top‐left‐radius: 10px;
#{$side}right: $radius; ‐webkit‐border‐top‐right‐radius: 10px;
} border‐top‐left‐radius: 10px;
‐webkit‐border‐#{$side}: { border‐top‐right‐radius: 10px;
left‐radius: $radius; }
right‐radius: $radius;
}
border‐#{$side}: { .tab {
left‐radius: $radius; ‐moz‐border‐radius‐topleft: 4px;
right‐radius: $radius; ‐moz‐border‐radius‐topright: 4px;
} ‐webkit‐border‐top‐left‐radius: 4px;
} ‐webkit‐border‐top‐right‐radius: 4px;
border‐top‐left‐radius: 4px;
.section‐hd { @include rounded‐top; } border‐top‐right‐radius: 4px;
.tab { @include rounded‐top(4px); } }

45. #5 : Selector Inheritance

46. #5 : Selector Inheritance
.blue‐box {
width: 100px;
height: 100px;
padding: 25px;
background: #00f;
&.wide {
width: 200px;
}
}
.bordered‐blue‐box {
@extend .blue‐box;
border: 1px solid #ccc;
}

47. #5 : Selector Inheritance
.blue‐box {
.blue‐box, .bordered‐blue‐box {
width: 100px;
width: 100px;
height: 100px;
height: 100px;
padding: 25px;
padding: 25px;
background: #00f;
background: #00f;
}
&.wide {
width: 200px;
.blue‐box.wide,
}
.wide.bordered‐blue‐box {
} width: 200px;
}
.bordered‐blue‐box {
@extend .blue‐box;
.bordered‐blue‐box {
border: 1px solid #ccc;
border: 1px solid #ccc;
}

48. #5 : Selector Inheritance
.blue‐box { .blue‐box, .bordered‐blue‐box {
width: 100px; width: 100px;
height: 100px; height: 100px;
padding: 25px; padding: 25px;
background: #00f; background: #00f;
}
&.wide {
width: 200px; .blue‐box.wide,
} .wide.bordered‐blue‐box {
} width: 200px;
}
.bordered‐blue‐box {
@extend .blue‐box; .bordered‐blue‐box {
border: 1px solid #ccc; border: 1px solid #ccc;
} }

49. #6 : SassScript

50. #6 : SassScript
arithmetic

51. #6 : SassScript
arithmetic
string interpolation
with #{}

52. #6 : SassScript
arithmetic
string interpolation
with #{}
simple logic
equality operators,
relational operators

53. #6 : SassScript
arithmetic control directives
string interpolation @if, @else if, and
@else
with #{}
@for, @each, and
@while
simple logic
equality operators,
relational operators

54. #6 : SassScript
arithmetic control directives
string interpolation @if, @else if, and
@else
with #{}
@for, @each, and
@while
simple logic
equality operators, color operations
relational operators

55. #6 : SassScript

56. #6 : SassScript

57. #6 : SassScript
article {
$base_font_size: 12px;
$base_line_height: $base_font_size * 1.5;
font‐size: $base_font_size;
line‐height: $base_line_height;
// simple math
h1 { font‐size: $base_font_size + ($base_line_height * 2); }
h2 { font‐size: $base_font_size + 4px; }
}

58. #6 : SassScript

59. #6 : SassScript

60. #6 : SassScript
// looping with conditional logic
@for $i from 1 through 10 {
$flickr_pink: #ff1c92;
#flickr_badge_image#{$i} {
@if $i % 2 == 0 {
color: $flickr_pink;
} @else {
color: desaturate($flickr_pink, 15%);
}
}
}

61. #7 : @import done right

62. #7 : @import done right
/**
* CSS @include directive
* ‐ good in theory but...
*
* ‐ generates an extra http
* request for each
*
* ‐ browser cannot execute
* those downloads in
* parallel
*/
@import url("reset.css");
@import url("other.css");
@import url("legacy.css");

63. #7 : @import done right
/** /**
* CSS @include directive * SCSS @import directive
* ‐ good in theory but... */
*
* ‐ generates an extra http // compiles '_reset.scss'
* request for each // partial into final CSS
* @import "reset";
* ‐ browser cannot execute
* those downloads in // compiles 'other.scss' into
* parallel // final CSS
*/ @import "other.scss";
@import url("reset.css");
@import url("other.css"); // honors 'the old way'
@import url("legacy.css"); @import "legacy.css";

64. #8 : Built-in minification

65. #8 : Built-in minification
$ sass ‐‐style expanded style.scss:style.css

66. #8 : Built-in minification
$

67. #8 : Built-in minification

68. #8 : Built-in minification
$ sass ‐‐style nested style.scss:style.css

69. #8 : Built-in minification
$

70. #8 : Built-in minification

71. #8 : Built-in minification
$ sass ‐‐style compact style.scss:style.css

72. #8 : Built-in minification
$

73. #8 : Built-in minification

74. #8 : Built-in minification
$ sass ‐‐style compressed style.scss:style.css

75. #9 : Comments (Line & Loud)

76. #9 : Comments (Line & Loud)
/*! "Loud comments"
* are just like regular ones
*/
.some‐col‐class {
/* forced line comment */
width: 160px;
font‐size: 2em;
}

77. #9 : Comments (Line & Loud)
/*! "Loud comments" /*! "Loud comment"
* are just like regular ones * e.g., for license text
*/ */
.some‐col‐class { .some‐col‐class {
/* forced line comment */ // real line comment
width: 160px; width: 160px;
font‐size: 2em; font‐size: 2em;
} }

78. #10 : Validation

79. #10 : Validation
catch breaking errors and fail loudly

80. #10 : Validation
catch breaking errors and fail loudly
print validation errors to the console at compile time

81. #10 : Validation
catch breaking errors and fail loudly
print validation errors to the console at compile time
print validation errors to the page mark-up

82. #10 : Validation
catch breaking errors and fail loudly
print validation errors to the console at compile time
print validation errors to the page mark-up
doesn't catch everything, but catches the important things

83. BONUS: Compass

84. BONUS: Compass
an open-source CSS authoring framework
compass-style.org

85. BONUS: Compass
an open-source CSS authoring framework
compass-style.org
provides mixins, functions, helpers, and other utilities

86. BONUS: Compass
an open-source CSS authoring framework
compass-style.org
provides mixins, functions, helpers, and other utilities
spriting

87. BONUS: Compass
an open-source CSS authoring framework
compass-style.org
provides mixins, functions, helpers, and other utilities
spriting
image URLs

88. BONUS: Compass
an open-source CSS authoring framework
compass-style.org
provides mixins, functions, helpers, and other utilities
spriting
image URLs
CSS3

89. BONUS: Compass
an open-source CSS authoring framework
compass-style.org
provides mixins, functions, helpers, and other utilities
spriting
image URLs
CSS3

90. "But what about..."
(addressing the bosses and other nay-sayers)

91. "Isn't it a different syntax?"

92. "Isn't it a different syntax?"
SHORT ANSWER: "No."
(weren't you paying attention?)

93. "Isn't it a different syntax?"

94. "Isn't it adding a step?"

95. "Isn't it adding a step?"
technically yes but...

96. "Isn't it adding a step?"
technically yes but...
...shouldn't you be minifying and concatenating your CSS
anyway?

97. "Isn't it adding a step?"
technically yes but...
...shouldn't you be minifying and concatenating your CSS
anyway?
for development:
$ sass ‐‐watch src/sass:deploy/css

98. "Isn't it adding a step?"

99. "Why not just use OOCSS?"

100. "Why not just use OOCSS?"
* the technique, not the framework

101. "Why not just use OOCSS?"
* the technique, not the framework
Sass won't guarantee great compiled CSS

102. "Why not just use OOCSS?"
* the technique, not the framework
Sass won't guarantee great compiled CSS
break bad habits

103. "Why not just use OOCSS?"
* the technique, not the framework
Sass won't guarantee great compiled CSS
break bad habits
avoid deeply nested Sass

104. "Why not just use OOCSS?"
* the technique, not the framework
Sass won't guarantee great compiled CSS
break bad habits
avoid deeply nested Sass
OOCSS lessons still apply
(just apply them via Sass!)

105. "Why not just use OOCSS?"

106. "Why not use [insert framework]?"

107. "Why not use [insert framework]?"
Nothing wrong with using a framework
Compass has built-in support for Blueprint grids

108. "Why not use [insert framework]?"

109. "Won't my compiled CSS still be a mess?"

110. "Won't my compiled CSS still be a mess?"
SHORT ANSWER: "Maybe?"

111. "Won't my compiled CSS still be a mess?"
SHORT ANSWER: "Maybe?"
bad habits are still bad habits

112. "Won't my compiled CSS still be a mess?"
SHORT ANSWER: "Maybe?"
bad habits are still bad habits
(compiled) CSS is still CSS

113. "Won't my compiled CSS still be a mess?"
SHORT ANSWER: "Maybe?"
bad habits are still bad habits
(compiled) CSS is still CSS
"classitis" is still "classitis", and
"selector cancer" is still "selector cancer"

114. "Won't my compiled CSS still be a mess?"

115. What are you waiting for?

116. Thank you.

117. Thank you.