CSS Preprocessors

What is a CSS preprocessor?

A CSS preprocessor is an extension of the CSS language. It adds developer-friendly features, and compiles (preprocesses) your sources down to valid CSS.

We are going to talk about the most popular ones today.

Sass

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

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

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.