CSS Preprocessors: Sass

A breakdown of Syntactically Awesome Style Sheets (Sass) - how it enhances CSS with variables, nesting, mixins, inheritance, and modular design.

Originally written by Carl Mills · January 2018

What Is Sass?

Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor - an extension language that adds programming-like features to standard CSS. It lets developers use variables, functions, and logic to write modular, maintainable code that compiles into plain CSS.

Sass describes itself as "CSS with Superpowers." Once written, Sass files are compiled into standard CSS files using the CLI or build tools.

Key Facts

  • File extension: Sass now uses .scss (older version used .sass).
  • Compilation: Convert Sass to CSS using sass input.scss output.css.
  • Watch mode: Use --watch to automatically recompile when files change.
  • Consistency: All team members should use the same preprocessor.
sass --watch app/sass:public/stylesheets

This command watches all Sass files in app/sass and compiles them to public/stylesheets.

Variables

Variables store reusable values such as colors, font stacks, or sizes. Sass uses the $ symbol to declare variables. 

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

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

When compiled, variables are replaced with their corresponding CSS values.

Nesting

Sass allows nested rules to mirror the structure of HTML. Use nesting wisely - overuse can lead to complex, hard-to-maintain CSS. 

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

  li { display: inline-block; }
}

Compiles to: 

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

nav li {
  display: inline-block;
}

Partials & Imports

Partials let you split your Sass into multiple smaller files for modularity. Partial filenames begin with an underscore and are imported with @import. 

// _reset.scss
html, body, ul, ol {
  margin: 0;
  padding: 0;
}

// base.scss
@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Sass combines all imported files into one compiled CSS file, avoiding multiple HTTP requests.

Mixins

Mixins group CSS declarations so you can reuse them without repetition. Define with @mixin and use with @include. 

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

Inheritance

Sass enables inheritance with @extend. Shared styles can be defined in placeholder selectors (prefixed with %), and reused across multiple elements. 

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message { @extend %message-shared; }
.success { @extend %message-shared; border-color: green; }
.error   { @extend %message-shared; border-color: red; }
.warning { @extend %message-shared; border-color: yellow; }

The compiled CSS groups shared declarations efficiently, reducing redundancy.

Operators

Sass supports mathematical operations, enabling dynamic styling and layout calculations. 

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}