Skip to content

Instantly share code, notes, and snippets.

@kadamwhite

kadamwhite/wcbos-preprocessors-outline.md

Created July 12, 2012 03:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kadamwhite/3095438 to your computer and use it in GitHub Desktop.
Save kadamwhite/3095438 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Pre-Processors Slide Outline for WordCamp Boston 2012
Raw
wcbos-preprocessors-outline.md

Stylesheet Pre-Processors

SASS

  • "Syntactically Awesome StyleSheets"
  • Born from Haml
  • Terse syntax, very different from CSS:
$blue: #3bbfce

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

LESS

  • "Meta-language": CSS is valid LESS by default
  • Originally in Ruby, now uses JavaScript
  • Runs in the browser or on the command line with Node.js
  • LESS Homepage
  • LESS on Github
@blue: #3bbfce;

.content-navigation {
  border-color: @blue;
  color: darken(@blue, 9%);
}

SCSS

$blue: #3bbfce;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

Stylus

blue = #3bbfce

.content-navigation
  border-color blue
  color darken(blue, 30%)

I happen to use LESS (YMMV!)

Nested rules

.widget {
  span {
    color: #14ff23;
    font-style: italic;
  }

  a {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

"Mixins" (functions)

.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

compiles to:

#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

Math!

@text-size: 16px;

h1 {
  font-size: @text-size * 2;
}
h1 {
  font-size: 32px;
}

@extend (SCSS only at present)

.widget {
  background-color: #444;
  color: #00ff00;
  font-family: monospace;
}
.error-widget {
  @extend .widget
  color: #ff0000;
}

compiles to

.widget,
.error-widget {
  background-color: #444;
  color: #00ff00;
  font-family: monospace;
}
.error-widget {
  color: #ff0000;
}

(If you want this in LESS, add a +1 on the pull request!)

Why are these significant (beyond being useful?)

  • Mature technology
    • Architecture (structure)
    • Maintenance
    • PHP -> HTML :: LESS -> CSS
  • Workflow-agnostic
    • Command-line via Ruby or Node.js
    • Server-side via ports to PHP, .NET, etc
    • Browser-side (LESS only) via JavaScript

Friends & family

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment