A Beginner’s Guide to Sass

Amanda Treutler
Level Up Coding
Published in
4 min readNov 30, 2019

--

What is Sass?

Sass (syntactically awesome style sheets) is a scripting language that is completely compatible with all versions of CSS. It is a CSS preprocessor that allows you to add functionality, efficiency, and usability to standard CSS.

Why should I use it?

If you’re already familiar with CSS, Sass is easy to learn and enables you to make use of variables, functions, mix-ins, and other built-in features that make it easier to design a web page or web app.

What will I learn if I read this guide?

I’m not going to try to teach you everything there is to know about Sass or all the things you can do with it. Instead, I’m going to introduce you to the basic concepts so you can get started right away!

Before we get started, here are a few things you should know:

Browsers can’t read Sass, so your Sass files have to be compiled into plain CSS. This can be done with Node.js as a compiler or with Gulp. You can also use the Live Sass Compiler extension for Visual Studio Code.

Sass supports two different syntax formats:

  • Sass: Sometimes called ‘indented syntax’ because it uses indentation instead of brackets. If you’re writing Sass, use the .sass file extension. Here’s what it looks like:
  • Scss (Sassy CSS): If you’re writing scss, use the .scss file extension. I will be using Scss for this guide. Here’s the same code written in scss:

Let’s get started!

Variables

Sass variables compile into the actual value, not into CSS variables. Here’s a quick example of how you can use variables to save time. This makes it really simple to change the colors across the whole site all at once.

Maps

Maps in Sass hold key-value pairs. Sass provides several functions that can be used in conjunction with maps to access values, do something for each value, create a new key-value pair, etc.

Accessing a value in a map

Doing something for each value in a map

Nesting

In standard CSS, it can sometimes be inefficient to access child elements. Sass makes that easier too!

Access all the paragraph elements within the container

Functions

Functions allow you to build complex operations and reuse them throughout your code. To define a function, use@function followed by the name of your function and any variables. A function must also contain an indication of the return value for the function call.

Example source: sass-lang.com

Mix-ins

Mix-ins allow us to group CSS values together for ease and efficiency. Here’s an example of creating and using a mix-in:

Imagine having to write all those styles over and over

Mix-ins can be passed an argument

If you want to reuse the code written in your mix-in but pass different values to create different styles, you can pass an argument to the mix-in.

There are a lot of other cool and interesting ways to use Sass, so I hope this sparked your interest! Give it a shot; it’s easy and fun to use!

Amanda Treutler

--

--