The Basics of Sass

When designing the front end of applications you can easily find yourself going down a rabbit hole of CSS. Trying to keep track of each id and class that has been styled while making sure it acts as it should everywhere through the app can get super tedious. The larger stylesheets become, the harder they can be to edit and maintain. In this article I'm going to walk through the basics of Sass, which helps simplify your code when styling applications.

Sass is a preprocessor scripting language that is compiled into CSS. SassScript is the scripting language itself, and it consists of two different syntaxes. The first is .sass which uses indentation to separate code blocks and newline characters to separate rules. The newer syntax, .scss, also known as 'Sassy CSS', uses block formatting like CSS with braces to denote code blocks and semicolons to separate rules within a block. In my examples I will be using the .scss syntax.

Variables

Sass allows you to assign styles to variables. All variables start with a dollar sign, and are assigned with a colon. When assigning variables you may use four different data types, being numbers, strings (with quotes or without), colors and booleans. If you have any information that you'll want to use multiple times throughout your stylesheet, you'll most likely want to assign it to a variable. Once a variable is declared you can as often as needed to help keep your styling consistent.

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

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

Nesting

When writing code in HTML it quickly becomes apparent that all pages are essentially nested code blocks. Sass will let you nest your CSS selectors in a way that follows the same pattern of nesting your HTML.

nav {
  ul {
    margin: 5;
    padding: 0;
  }

  li { 
    display: inline-block; 
  }

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

Modules

Sass also allows you to split up your style logic into multiple files using the @use rule, which can help keep your stylesheets from becoming obnoxiously long. This rule allows you to load another Sass file as a module, where you can use all of its code in your current file by simply putting @use <filename>; at the top of your style sheet.

// main.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #49a2b8;

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

// styles.scss
@use 'main';

.inverse {
  background-color: main.$primary-color;
  color: white;
}

Mixins

A mixin is a block of code that lets you group CSS declarations that you might reuse throughout your site. To create a mixin you use the @mixin command followed by a space and your mixin name, followed by the block of code you want to reuse. You will then use that mixin by using the @include command.

@mixin flex {
    display: -webkit-flex;
    display: flex;
}

.row {
    @include flex;
}

Inheritance

There are often cases when designing a page when one class should have all the styles of another class, as well as its own specific styles. The @extend command lets you share a set of CSS properties from one selector to another.

.button-basic  {
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

This wraps up the most basic aspects of writing Sass, but there are plenty of other advanced features that the language has to offer. It can help you write stylesheets faster, while keeping your code DRY. After writing in .scss you can even find .css to be harder, since you'll notice it takes much more time composing after getting used to the multiple shortcuts Sass brings to the table. If you are still using basic CSS and find yourself wasting time repeating yourself often, Sass is the perfect tool to learn.