Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Wrangling the CSS Beast with Sass

2,468 views

Published on

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

Published in: Technology, Education
  • Be the first to comment

Wrangling the CSS Beast with Sass

  1. 1. Wrangling the CSS Beast with Sass by Rob Friesel
  2. 2. Who is this guy?
  3. 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. 4. Sass: what the heck is that?
  5. 5. Sass: what the heck is that?“Syntactically Awesome Style Sheets” - sass-lang.com
  6. 6. Sass: what the heck is that?“Syntactically Awesome Style Sheets” - sass-lang.comcreated by Hampton Catlin Nathan Weizenbaum, primary designer & lead developer Chris Eppstein, core contributor & creator of Compass
  7. 7. Sass: what the heck is that?“Syntactically Awesome Style Sheets” - sass-lang.comSass/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. 8. In other words: it fixes CSS
  9. 9. In other words: it fixes CSS“But CSS is perfect, right?What could you possiblywant to add?”
  10. 10. CSS problems
  11. 11. CSS problemsrepetitive
  12. 12. CSS problemsrepetitiverepetitive
  13. 13. CSS problemsrepetitiverepetitivenot expressive
  14. 14. CSS problemsrepetitiverepetitivenot expressiveno variables
  15. 15. CSS problemsrepetitiverepetitivenot expressiveno variablesno functions, no calculations, no inheritance, etc.
  16. 16. CSS3 to the rescue?
  17. 17. CSS3 to the rescue?Not really
  18. 18. CSS3 to the rescue?Not really some new properties
  19. 19. CSS3 to the rescue?Not really some new properties some new values
  20. 20. CSS3 to the rescue?Not really some new properties some new values no new syntax
  21. 21. CSS3 Sass to the rescue
  22. 22. What Sass offersvariables conditionalsselector inheritance loopsmixins syntax validationcalculations and more
  23. 23. Getting Sass
  24. 24. Getting Sass $
gem
install
sass * requires Rubydownload source/contribute: github.com/nex3/sass
  25. 25. “OK, I’ve got it. Now what?”
  26. 26. baby stepsCSS is Sass and Sass (SCSS) compiles to CSS
  27. 27. baby stepsCSS is Sass and Sass (SCSS) compiles to CSS $
mv
my.css
my.scss $
sass
my.scss:my.css
  28. 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. 29. #1 : Variables
  30. 30. #1 : Variables/**
*
Why
find/replace
in
CSS
*
files
doesnt
work:
*/h1#masthead
{ color:
#f00;}.post‐hd
{ color:
#ff0000;}a.outbound‐link
{ color:
red;}.sidebar
p
{ color:
rgba(255,
0,
0,
1);}
  31. 31. #1 : Variables/** //
Sass
to
the
rescue
*
Why
find/replace
in
CSS
*
files
doesnt
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. 32. #1 : Variables
  33. 33. #1 : Variables
  34. 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. 35. #2 : Nesting (selectors)
  36. 36. #2 : Nesting (selectors).post
code,.post
pre,.post
.source
{ font‐family:
"Inconsolata",
Courier,
monospace;}
  37. 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. 38. #3 : Nesting (properties)
  39. 39. #3 : Nesting (properties).styled‐text
{ font‐family:
"Georgia",
Times,
serif; font‐style:
oblique; font‐size:
2em;}
  40. 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. 41. #4 : Mixins
  42. 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. 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. 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. 45. #5 : Selector Inheritance
  46. 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. 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. 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. 49. #6 : SassScript
  50. 50. #6 : SassScriptarithmetic
  51. 51. #6 : SassScriptarithmeticstring interpolationwith #{}
  52. 52. #6 : SassScriptarithmeticstring interpolationwith #{}simple logic equality operators, relational operators
  53. 53. #6 : SassScriptarithmetic control directivesstring interpolation @if, @else
if, and @elsewith #{} @for, @each, and @whilesimple logic equality operators, relational operators
  54. 54. #6 : SassScriptarithmetic control directivesstring interpolation @if, @else
if, and @elsewith #{} @for, @each, and @whilesimple logic equality operators, color operations relational operators
  55. 55. #6 : SassScript
  56. 56. #6 : SassScript
  57. 57. #6 : SassScriptarticle
{ $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. 58. #6 : SassScript
  59. 59. #6 : SassScript
  60. 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. 61. #7 : @import done right
  62. 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. 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. 64. #8 : Built-in minification
  65. 65. #8 : Built-in minification$ sass
‐‐style
expanded
style.scss:style.css
  66. 66. #8 : Built-in minification$
  67. 67. #8 : Built-in minification
  68. 68. #8 : Built-in minification$ sass
‐‐style
nested
style.scss:style.css
  69. 69. #8 : Built-in minification$
  70. 70. #8 : Built-in minification
  71. 71. #8 : Built-in minification$ sass
‐‐style
compact
style.scss:style.css
  72. 72. #8 : Built-in minification$
  73. 73. #8 : Built-in minification
  74. 74. #8 : Built-in minification$ sass
‐‐style
compressed
style.scss:style.css
  75. 75. #9 : Comments (Line & Loud)
  76. 76. #9 : Comments (Line & Loud)/*!
"Loud
comments"
*
are
just
like
regular
ones
*/.some‐col‐class
{ /*
forced
line
comment
*/ width:
160px; font‐size:
2em;}
  77. 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. 78. #10 : Validation
  79. 79. #10 : Validationcatch breaking errors and fail loudly
  80. 80. #10 : Validationcatch breaking errors and fail loudly print validation errors to the console at compile time
  81. 81. #10 : Validationcatch breaking errors and fail loudly print validation errors to the console at compile time print validation errors to the page mark-up
  82. 82. #10 : Validationcatch breaking errors and fail loudly print validation errors to the console at compile time print validation errors to the page mark-updoesnt catch everything, but catches the important things
  83. 83. BONUS: Compass
  84. 84. BONUS: Compassan open-source CSS authoring framework compass-style.org
  85. 85. BONUS: Compassan open-source CSS authoring framework compass-style.orgprovides mixins, functions, helpers, and other utilities
  86. 86. BONUS: Compassan open-source CSS authoring framework compass-style.orgprovides mixins, functions, helpers, and other utilities spriting
  87. 87. BONUS: Compassan open-source CSS authoring framework compass-style.orgprovides mixins, functions, helpers, and other utilities spriting image URLs
  88. 88. BONUS: Compassan open-source CSS authoring framework compass-style.orgprovides mixins, functions, helpers, and other utilities spriting image URLs CSS3
  89. 89. BONUS: Compassan open-source CSS authoring framework compass-style.orgprovides mixins, functions, helpers, and other utilities spriting image URLs CSS3
  90. 90. "But what about..."(addressing the bosses and other nay-sayers)
  91. 91. "Isnt it a different syntax?"
  92. 92. "Isnt it a different syntax?"SHORT ANSWER: "No." (werent you paying attention?)
  93. 93. "Isnt it a different syntax?"
  94. 94. "Isnt it adding a step?"
  95. 95. "Isnt it adding a step?"technically yes but...
  96. 96. "Isnt it adding a step?"technically yes but......shouldnt you be minifying and concatenating your CSSanyway?
  97. 97. "Isnt it adding a step?" technically yes but... ...shouldnt you be minifying and concatenating your CSS anyway? for development:$
sass
‐‐watch
src/sass:deploy/css
  98. 98. "Isnt it adding a step?"
  99. 99. "Why not just use OOCSS?"
  100. 100. "Why not just use OOCSS?" * the technique, not the framework
  101. 101. "Why not just use OOCSS?" * the technique, not the frameworkSass wont guarantee great compiled CSS
  102. 102. "Why not just use OOCSS?" * the technique, not the frameworkSass wont guarantee great compiled CSS break bad habits
  103. 103. "Why not just use OOCSS?" * the technique, not the frameworkSass wont guarantee great compiled CSS break bad habits avoid deeply nested Sass
  104. 104. "Why not just use OOCSS?" * the technique, not the frameworkSass wont guarantee great compiled CSS break bad habits avoid deeply nested SassOOCSS lessons still apply (just apply them via Sass!)
  105. 105. "Why not just use OOCSS?"
  106. 106. "Why not use [insert framework]?"
  107. 107. "Why not use [insert framework]?"Nothing wrong with using a framework Compass has built-in support for Blueprint grids
  108. 108. "Why not use [insert framework]?"
  109. 109. "Wont my compiled CSS still be a mess?"
  110. 110. "Wont my compiled CSS still be a mess?" SHORT ANSWER: "Maybe?"
  111. 111. "Wont my compiled CSS still be a mess?" SHORT ANSWER: "Maybe?" bad habits are still bad habits
  112. 112. "Wont my compiled CSS still be a mess?" SHORT ANSWER: "Maybe?" bad habits are still bad habits (compiled) CSS is still CSS
  113. 113. "Wont 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. 114. "Wont my compiled CSS still be a mess?"
  115. 115. What are you waiting for?
  116. 116. Thank you.
  117. 117. Thank you.

×