CSS Preprocessors

Sass has been around the longest of the big preprocessors.

Sass is written in Ruby and integrates well with Rails.

The styles for this course website are written in Sass.

$text-color: #333333
$selected-text-color: white

$content-width: 600px
$vertical-spacing: 3rem

$font-family: "Lato", sans-serif
$font-weight-light: 300
$font-weight-heavy: 900

html, body
  font-family: $font-family
  font-weight: $font-weight-light
  font-size: 16px
  line-height: 1.333
  color: $text-color

section // Main section
  background-color: khaki
  article
    padding: 20px

Compiles to:

section { background-color: khaki; }
section article { padding: 20px; }

@function hierarchy($importance: 1)
  @if $importance < 1
    @return 1rem
  @else
    @return (1rem + 1rem * ($importance - 1) * 0.75)

h1
  font-size: hierarchy(4)
  margin-bottom: hierarchy(2)

p
  font-size: hierarchy(1)
  padding: hierarchy(2)

Compiles to:

h1 {
  font-size: 3.25rem;
  margin-bottom: 1.75rem;
}

p {
  font-size: 1rem;
  padding: 1.75rem;
}

$standard-radius: 2px

@mixin corners($multiplier: 1)
  border-radius: ($standard-radius * $multiplier)

h1
  @include corners

button, a.button
  @include corners(2)

Compiles to:

h1 { border-radius: 2px; }
button, a.button { border-radius: 4px; }

p
  background-color: transparentize(orangered, 0.9)
  color: mix(orangered, black)

Compiles to:

p {
  background-color: rgba(255, 69, 0, 0.1);
  color: #7f2200;
}

.main
  display: inline-block
  @media screen and (max-width: 320px)
    display: block

Compiles to:

.main { display: inline-block; }
@media screen and (max-width: 320px) {
  .main { display: block; }
}

And many, many more.

(Sass homepage)

Less has been around since 2009.

It is implemented in JavaScript.

Which means it can run on the server or in the browser.

@text-color: #333333;
@selected-text-color: white;

@content-width: 600px;
@vertical-spacing: 3rem;

@font-family: "Lato", sans-serif;
@font-weight-light: 300;
@font-weight-heavy: 900;

html, body {
  font-family: @font-family;
  font-weight: @font-weight-light;
  font-size: 16px;
  line-height: 1.333;
  color: @text-color;
}

section { // Main section
  background-color: khaki;
  article {
    padding: 20px;
  }
}

Compiles to:

section { background-color: khaki; }
section article { padding: 20px; }

@standard-radius: 2px;

.corners(@multiplier: 1) {
  border-radius: (@standard-radius * @multiplier);
}

h1 {
  .corners;
}

button, a.button {
  .corners(2);
}

Compiles to:

h1 { border-radius: 2px; }
button, a.button { border-radius: 4px; }

We're just scratching the surface.

(Less homepage)

Stylus is the new kid on the block, with the first commit in December 2010.

It is also implemented in JavaScript.

Stylus may not have the same depth of features as Sass and Less, but the core set is there.

body
  font 12px Helvetica, Arial, sans-serif

Compiles to:

body { font: 12px Helvetica, Arial, sans-serif; }

Check out the Stylus homepage for more.