SASS Tutorial

Sass Tutorial

Sass is a CSS pre-processor. Sass reduces repetition of CSS and therefore saves time.

Sass stands for Syntactically Awesome Style Sheets.

Variables

Sass variables are simple: you assign a value to a name that begins with $, and then you can refer to that name instead of the value itself.

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Nesting

Sass lets you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.

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

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

$primary-color: #333;

body {
  color: $primary-color;
}