All About That SASS

Let’s say a friend or co-worker mentions SASS to you out of the blue one day. You find it interesting, and you can see yourself utilizing it to your advantage and making it easier to write out your CSS. Then you wonder, what exactly is SASS? How would you be able to use it, and what are the basic functions of it? Why is it so important that people are sharing it? This article will explain all you need to know and get you started with the basics!

What is SASS?

SASS, short for Syntactically Awesome Style Sheets (awesome name!), is a CSS preprocessor. In other words, it’s a CSS extension that allows a programmer to use some nifty tricks to make writing out CSS a lot less of a chore and helps keep code organized. Then, when the code is complete, it is translated back into CSS code during the compiling stage. SASS allows you to use variables, nesting rules, operators, and more, so it’s useful if you have to write a lot of code!

How do you use SASS?

In order to start using SASS, you will first need to get npm, which is the Node.js package manager. This is a command-line tool that allows us to easily download cool packages like SASS and their dependencies. In this tutorial, I’ll be using Linux, so if you’re using Windows or Mac, make sure to look at the documentation for those command lines instead!

First, you want to install nvm, or Node Version Manager. This also gets you Node.js and npm when you install it, so you have more terminal options! To get it, go into your terminal. Make sure you’re in the directory you want to install nvm into, then run the code below:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash

Once it finishes running, you’re almost set! Now to get SASS, you just have to input the command in the terminal! (If you want to check if you have SASS, just type sass in the terminal. You should be shown a list of inputs/outputs, source maps, and other commands!)

npm install -g sass

Now you’re set to use SASS on your computer! Whatever text editor that you use on your computer should now be able to use SASS as well. If you’re using text editors such as Atom, Sublime, etc, there are methods to getting SASS installed on those as well, but for this tutorial, it applies for local text editors that come with your computer, such as vim!

SASS Basics

So you have SASS...now what? To start using it, you first have to learn some of the basic functions. We will be covering variables, how nesting rules work, mixins, extensions, and operations, as these are some of the key functions in SASS!

Variables

Yes, you have the ability to create variables in SASS! To make a variable, you simply add a $ sign in front of a variable name, then put in a value that you want that variable to have. It helps if you want to reuse this particular value in many other places in your CSS, such as a color or a font size. Here is an example:

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

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

$font-stack and $primary-color both have a value stored in them and are placed in the body. It’ll work just as though you put in the font family and color yourself! Keep in mind that you will still have to write out the value first inside the variable before you can use it!

Nesting

First of all, what is nesting? In HTML, you see nesting all the time - putting headers inside sections, paragraphs inside articles, figure captions inside a figure, etc. Unfortunately, CSS doesn’t have this option. If you want to write CSS for different parts of a section, you’ll have to type out the whole thing over again. No one wants to see something like this:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

It can be messy, and a chore to read. However, thanks to SASS, there can also be nesting in CSS! Much like HTML, you can apply these parts of a section in a nest. It won’t look like the code above, and it’ll be much clearer to read! Take a look:

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

  li { display: inline-block; }

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

Every part is inside nav, without having to mention it more than once. And this is good because we want to keep things DRY - in other words, don’t repeat yourself!

Mixins

Writing lots of the same properties and code over and over can be tedious, and that time can be better spent on other things you need to get done. With SASS, you can create a mixin! This allows you to group your CSS properties into one so that you can change all of them in one go. It takes a variable, and whatever value you give that variable, it will apply for all of the properties that are inside the mixin. For example:

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

The value for $property becomes 30deg, so that value applies to all of the properties inside transform. It saves a lot of time and is still readable!

Extend

This is one of the most useful features in SASS, as it not only keeps your code DRY, it also saves a lot of time! Extending your code out to other selectors makes it so that you don’t have to write the same code for every selector that needs it - imagine having 30 selectors that need the same 3 properties! SASS allows you to extend these properties so that they apply to any selectors you wish. For example:

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

%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.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;
}

%message-shared has a set of three properties and is being extended to a bunch of classes. What this does is it gives each of these classes the same three properties, so the only thing you’d have to add in is something different for that specific class! It keeps things neat and easy to read.

Operators

The fun part of SASS is that, finally, you can do math! Design isn’t always math-free, so it helps to be able to use operators to create better designs and have more flexible options. A good example is getting the height and width a certain percentage so that it remains responsive and also looks precise as you design. Take a look at how it’s done:

.container {
  width: 100%;
}

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

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

The width has a value of a certain amount of pixels multiplied by a percent, which is much more precise than simply writing out a percentage or pixel amount. It also takes into account that there’s a set pixel amount of 960, so it helps the width become more responsive should something in the design change. There are plenty of more uses for operators, and they’re something you can play around with!

Why SASS?

Just from taking a look at the basics of SASS, it’s safe to say that it’s certainly a good extension. Using SASS means using a better version of CSS, with more flexibility in how you code, making the task of styling less tedious and messy, and also allows your code to be readable! It can even shorten the amount of code you write in the file, which makes for easier reading and less scrolling! Overall, SASS is worth learning, and it will definitely be of use the next time you want to style anything you are creating. So what are you waiting for? Start using SASS and see for yourself how powerful it is!