CSS PRE-PROCESSING

As CSS files get larger and more complex, they get harder to maintain. A preprocessor can simplify the process using features that don't yet exist in CSS, such as variables, nesting, mixins, and inheritance. Once a local environment is setup, you can use Sass (.sass) or Sassy CSS (.scss) syntax to better organize your projects and write cleaner, more efficient code in "pre-processed" SASS files that can be automatically "processed" (compiled) to save out a normal CSS file (.css) that you can use in your web projects.

Variables

Variables can be used to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. Sass uses the $ symbol to make something a variable. Example:

SCSS Syntax:


$color-body: #333;

body {
  color: $color-body;
}

Compiled CSS:


body {
  font: 100% Arial, Helvetica, sans-serif;
  color: #333;
}

Nesting

Sass allows you to nest your CSS selectors in a way that can follow the visual hierarchy of your HTML. Example:

SCSS Syntax:


nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    background: $color-grey10;
    color: $color-links;
  }

  a:hover {
    background: $color-links;
    color: $color-grey-10;
  }
}

Compiled CSS:


nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
  background: #e5e5e5;
  color: #39c;
}

nav a:hover {
  background: #39c;
  color: #fff;
}

Rendered HTML

Further Reading: