Sass (in CSS)

What is Sass in CSS?

Sass [sass-lang.com] is a tool and programming language for generating CSS code. It's a CSS preprocessor: it adds metaprogramming to CSS, letting you use variables that are evaluated at build time, including in places where the CSS syntax normally wouldn't allow, as well as using mixins and functions in CSS.

Example of Sass Code

Sass comes in two flavors: Sass (.sass extension) and SCSS (.scss). The Sass version doesn't have braces ({}) or semi-colons (;).

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
}

The SCSS code above generates the following CSS:

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

nav ul li {
  display: inline-block;
  margin-left: -2px;
  margin-right: 2em;
}