Wrangling the CSS Beast with Sass

Wrangling the CSS
Beast with Sass
by Rob Friesel

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

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

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

In other words: it ﬁxes CSS

“But CSS is perfect, right?
What could you possibly
want to add?”

CSS problems

repetitive
repetitive

CSS problems

repetitive
repetitive
not expressive

CSS problems

repetitive
repetitive
not expressive
no variables

CSS problems

repetitive
repetitive
not expressive
no variables
no functions, no calculations, no inheritance, etc.

CSS3 to the rescue?

Not really

CSS3 to the rescue?

Not really
some new properties

CSS3 to the rescue?

Not really
some new properties
some new values

CSS3 to the rescue?

Not really
some new properties
some new values
no new syntax

What Sass offers

variables conditionals
selector inheritance loops
mixins syntax validation
calculations and more

Getting Sass

$ gem install sass
* requires Ruby

download source/contribute:
github.com/nex3/sass

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

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

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

$ mv my.css my.scss
$ sass my.scss:my.css

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

#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);
}

#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;
} }

#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;
    }
  }
}

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

#2 : Nesting (selectors)
.post code,
.post pre,
.post .source {
}

.post {
code, pre, .source {
}
}

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

#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;
}
}

#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}: {
}
}

.section‐hd { @include rounded‐top; }
.tab { @include rounded‐top(4px); }

#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;
}
border‐#{$side}: {
.tab {
  ‐moz‐border‐radius‐topleft: 4px;
  ‐moz‐border‐radius‐topright: 4px;
}
  ‐webkit‐border‐top‐left‐radius: 4px;
}
  ‐webkit‐border‐top‐right‐radius: 4px;
.section‐hd { @include rounded‐top; }
  border‐top‐right‐radius: 4px;
.tab { @include rounded‐top(4px); }
}

#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; }
}
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;
.section‐hd { @include rounded‐top; }   border‐top‐right‐radius: 4px;
.tab { @include rounded‐top(4px); } }

#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;
}

.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;
}
  @extend .blue‐box;
  border: 1px solid #ccc;
border: 1px solid #ccc;
}

.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;
}
  @extend .blue‐box; .bordered‐blue‐box {
  border: 1px solid #ccc; border: 1px solid #ccc;
} }

#6 : SassScript
arithmetic
string interpolation
with #{}

#6 : SassScript
arithmetic
string interpolation
with #{}

simple logic
equality operators,
relational operators

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

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

#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; }
}

#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%);
}
}
}

#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");

#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";

#8 : Built-in miniﬁcation

$ sass ‐‐style expanded style.scss:style.css


$


$ sass ‐‐style nested style.scss:style.css


$ sass ‐‐style compact style.scss:style.css


$ sass ‐‐style compressed style.scss:style.css

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

#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;
} }

#10 : Validation

catch breaking errors and fail loudly

#10 : Validation

print validation errors to the console at compile time

#10 : Validation

print validation errors to the page mark-up

#10 : Validation

print validation errors to the page mark-up
doesn't catch everything, but catches the important things

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

BONUS: Compass
compass-style.org
provides mixins, functions, helpers, and other utilities

BONUS: Compass
compass-style.org
spriting

BONUS: Compass
compass-style.org
spriting
image URLs

BONUS: Compass
compass-style.org
spriting
image URLs
CSS3

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

"Isn't it a different syntax?"

"Isn't it a different syntax?"

SHORT ANSWER: "No."
(weren't you paying attention?)

"Isn't it adding a step?"

technically yes but...


...shouldn't you be minifying and concatenating your CSS
anyway?


...shouldn't you be minifying and concatenating your CSS
anyway?
for development:

$ sass ‐‐watch src/sass:deploy/css

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


Sass won't guarantee great compiled CSS


break bad habits


break bad habits
avoid deeply nested Sass


break bad habits
avoid deeply nested Sass
OOCSS lessons still apply
(just apply them via Sass!)

"Why not use [insert framework]?"

"Why not use [insert framework]?"

Nothing wrong with using a framework
Compass has built-in support for Blueprint grids

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


SHORT ANSWER: "Maybe?"


bad habits are still bad habits


(compiled) CSS is still CSS


(compiled) CSS is still CSS
"classitis" is still "classitis", and
"selector cancer" is still "selector cancer"

Wrangling the CSS Beast with Sass

More Related Content

What's hot (20)

Similar to Wrangling the CSS Beast with Sass (20)

Recently uploaded (20)

Wrangling the CSS Beast with Sass

Editor's Notes