What is Sass? An Introduction to The World’s Most Popular CSS Preprocessor

Now, if you want to build a website that’s beautiful, user friendly, and works across devices you’ll need to use CSS. Although CSS is a cornerstone of web technology—your websites would look like an unformatted Google Doc without it—it lacks a lot of the functionality of programming languages that makes them so efficient and easy to maintain. Enter Sass.

What is Sass? Sass is a CSS preprocessor, which is a tool that developers use to write CSS using more advanced features of programming—namely variables and inheritance—to make it easier to maintain their CSS code. Although there are a number of popular CSS preprocessors, in this article we will focus on Sass because it is the most commonly used one.

Let’s take a look at Sass—what it is, how it works, how to use it, and how you can learn it.

Table of Contents

• What is Sass?
• How to use Sass (with examples)
• How is Sass different from CSS?
• The Pros and Cons of Sass
• Who uses Sass?
• How to Learn Sass

Is Tech Right For you? Take Our 3-Minute Quiz!

You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals

What is Sass?

Sass (Syntactically Awesome Style Sheets) is an extension of CSS. As we mentioned, CSS is a style sheet language that developers use to describe the look and feel of a webpage written in a markup language like HTML. Whether you’re using Google Chrome, Safari, or Firefox, a CSS style sheet is a rule book that tells your web browser how to display the webpage. Style sheets are responsible for making webpages look pretty. CSS controls the design and aesthetics of a webpage and affects how different page elements appear, and most importantly, how the website adapts to different browsers and devices (e.g. mobile phones).

Although CSS is a must-have skill for front end developers—you’ll find it all over the internet—it lacks some of the more powerful features that come standard in other programming languages. This makes it hard for developers to write code that’s concise, flexible, reusable, and maintainable.

Although plenty of developers write plain “vanilla” CSS, professional developers will often use CSS preprocessors. CSS preprocessors are special scripting languages that developers use to extend the abilities of vanilla CSS, making their code easier to read, write, and maintain.

Sass is a CSS preprocessor originally designed by Hampton Catlin and developed by Natalie Weizenbaum. Sass is one of the most popular CSS preprocessors in the world of front end development.

(back to top)

How to Use Sass (with Examples)

To start using Sass to write your CSS code, you first need to be able to run the programming language that powers Sass. When it was created in 2006, Sass was written in the Ruby programming language. At the time not only was Ruby at the center of web development, but it also was the language the creator and designer used the most.

As the Sass project has grown over the last 15+ years, Ruby’s popularity has waned and faster and more powerful programming languages have gained popularity. In 2016, Natalie Weizenbaum implemented a new version of Sass written in Dart, a new programming language developed by Google. Compared to Ruby, Dart isn’t as widely used, but it’s considerably faster, easy to install, and easy to learn. Dart Sass is also compatible and can be compiled into JavaScript, which makes it easier to use in frontend development (since JavaScript is the only programming language that can run in the web browser).

Thus, before you can start using Sass, you first need to install Dart (we won’t go into detail about how to do that in this blog post but you’ll find more information at that link). Once you have the right tools and system in place, your next step is to get familiar with the syntax of Sass.

Let’s look at some of the basics of Sass with some examples from the official Sass website:

Syntax

Sass can be written in two types of syntax: indented syntax (.sass) or SCSS (Sassy CSS) syntax (.scss). The indented syntax (sometimes called SASS) is less commonly used than the curly brackets that SCSS and CSS use for coding, so this blog post will focus on SCSS.

@mixin button-base() {

    @include typography(button);

    @include ripple-surface;

    @include ripple-radius-bounded;
    display: inline-flex;
    position: relative;
    height: $button-height;
    border: none;
    vertical-align: middle;
    &:hover {
        cursor: pointer;
    }

    &:disabled {
        color: $mdc-button-disabled-ink-color;
        cursor: default;
        pointer-events: none;
    }
}

@mixin button-base()

@include typography(button)

@include ripple-surface

@include ripple-radius-bounded
display: inline-flex
position: relative
height: $button-height
border: none
vertical-align: middle
&:hover
cursor: pointer

&:disabled
color: $mdc-button-disabled-ink-color
cursor: default
pointer-events: none

As described on the Sass website, SCSS is “a superset of CSS, meaning that all valid CSS can be applied when using SCSS syntax.” The benefit to you is that for the most part you can write CSS as you normally do, and then when appropriate you can take advantage of the features available to you in Sass. This will make transitioning from CSS to SCSS easier.

Variables

When using traditional CSS to build a website with multiple pages, or even just multiple sections, you often find yourself applying the same styles–like font styles and colors–over and over again. Now there are ways to write your CSS in more efficient ways, but as your website grows you’ll inevitably find yourself writing the same line of CSS code over and over. Talk about a waste of time!

And to make matters even worse, what if your creative director switches all those fonts from one to another? Now you’re editing dozens, maybe hundreds of lines of code!

Enter variables in Sass. The variable features of Sass allow you to save time and avoid repetition. Variables allow you to define and store information in one place so they can be reused throughout a style sheet. Using the $ symbol for variables, Sass lets you store colors, font stacks, or any CSS value you might reuse.

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

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

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

This way instead of writing out the full font-family, you just place your variable. And if you need to make a switch? Change it once, and all the dozens or hundreds of instances of the variable do the rest for you!

Nesting

Nesting lets you organize information in layers. Because it cuts down on the amount of code you need, it can make it look cleaner and more concise. With Sass, you can use CSS selectors —like nav, ul, li, and a—to target the HTML elements on your webpage that you want to style and follow your HTML’s visual hierarchy (since HTML is also nested). While nesting is great for making your CSS more organized and readable, overly nested code can be hard to maintain once it’s compiled into CSS.

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

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

nav li {
    display: inline-block;
}

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

The amount of code saved in this example isn’t HUGE (a few instances of “nav”) but over the course of hundreds or thousands of lines of SCSS code, the savings can be substantial.

Mixins

Variables help you store values so you can reuse them throughout the style sheet. Mixins take it one step further. Sass lets you create a mixin—a group of CSS declarations that you can reuse as you build the site. Instead of just applying a variable to reuse a font, for example, mixins let you define values for the fonts, colors, border values and more. And tie them all together into a mixin. This makes it easier and faster to apply the same design elements to your pages without remembering to code for each instance of the font or color or other associated CSS style.

@mixin theme($theme: DarkGray) {
    background: $theme;
    box-shadow: 0 0 1px rgba($theme, .25);
    color: #fff;
}
.info {
    @include theme;
}
.alert {
    @include theme($theme: DarkRed);
}
.success {
    @include theme($theme: DarkGreen);
}

.info {
    background: DarkGray;
    box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
    color: #fff;
}
.alert {
    background: DarkRed;
    box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
    color: #fff;
}
.success {
    background: DarkGreen;
    box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
    color: #fff;
}

(back to top)

How is Sass different from CSS?

Sass is one of the most preferred style sheet languages among developers, but it’s not the only one available. There’s CSS, SCSS, and LESS. What makes Sass different?

Sass vs CSS

CSS is the original style sheet language, but its simplicity can also make it long winded and hard to maintain at scale. CSS preprocessors, like Sass, became the web developer’s answer for cutting down on the amount of repetitive coding that can happen when writing CSS.

The main differences between Sass and CSS are in their features. While Sass has the extra functionality of using variables, nesting, mixins, and more, CSS doesn’t. Where CSS would eat up your time by rewriting the same codes over and over and over again, Sass helps save time by reducing repetition.

Sass vs SCSS

But here’s where the answer to this question gets confusing: SCSS is technically one of two syntax options for Sass, where the other one is SASS. So SCSS is a syntax of Sass (note the lowercase letters) and the difference between SCSS and SASS is that one uses brackets—SCSS—and the other uses indentation—SASS—and BOTH are just variations on Sass.

Got it?

Sass vs LESS

LESS (Leaner Style Sheets) is described as a “backward-compatible language extension for CSS.” Although both Sass and LESS are CSS preprocessors, there are a few differences between the style sheet languages that are worth paying attention to.

We mentioned earlier that SCSS—short for Sassy CSS—is one of two syntaxes for Sass. Instead of using indentations and line breaks like its outdated alternative, SASS, SCSS uses curly brackets and semicolons.

While Sass uses Dart, LESS uses JavaScript as its programming language which can make it easier to install and start using. That said, Sass is older and more popular, and Sass offers users some options Less does not, for example, the option of choosing between syntaxes.

(back to top)

Is Tech Right For you? Take Our 3-Minute Quiz!

You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals

The Pros and Cons of Sass

Why should you use Sass? Like with any other tool, there are pros and cons, but the consensus is pretty clear that learning Sass is a good investment of your time.

The Pros of Sass

You can boil the benefits of Sass down to three words: functionality, efficiency, and time-saving. With Sass, you can:

Take Advantage of More Possibilities When Creating Code

The features of Sass speak for themselves. Just having the option to use variables and functions lets you do more. For example, instead of using the six-digit hex code for color values (#000000 is black), Sass can let you use a function to store colors as variables instead (and that can make your life easier because instead of remembering the hex code for a color, you can just write $black or $maintextcolor).

Keep Your Code DRY

When compared to CSS, Sass lets you create the same web design with fewer lines of code, because you can keep your code DRY. DRY is a software principle that stands for “Don’t Repeat Yourself.” Its purpose is to reduce repetitive information and patterns in code. This might not be a problem for small projects, but just wait until you’re working on a larger project. Or a larger project on a larger team! Coding in native CSS can become unnecessarily long—leading to code bloat and sluggish performance—for bigger or older web applications. And that can slow everything down.

When using CSS, you have to code for each design element in every place you want it to appear on the webpage. That’s not the case with Sass. Because Sass allows you to create DRY code with mixins that act as a reference throughout your code, you can combat code bloat for cleaner, clearer, dryer code.

Save Time by Reusing Sass Code

The ability to keep your code DRY trickles into saving time and effort. There’s no need to write the same code multiple times in different places. Because Sass code is reusable, you can save time when building a webpage by referencing past code. When changing colors, frame sizes, and more, Sass also makes it easier and faster to change the styles in different places. On top of that, it helps reduce coding mistakes. Reduce, reuse, recycle.

The Cons of Sass

Like every coding tool, there are disadvantages to using Sass, but the cons of Sass apply to every other CSS preprocessor. When using Sass, the cons include:

Compiling Code

The only style sheet language websites can read is CSS. When using Sass (or any other preprocessor), you’ll have to take the extra step during the development phase to compile the code into a CSS file. This takes time and since running the compiler in your environment requires a much more complex set up than loading an HTML document in your web browser, it’s a process that’s prone to errors. In other words, if you encounter a problem with Sass, debugging the issue could eat up any time you save by writing fewer lines of CSS code!

Difficult Troubleshooting Your CSS

In addition to the challenges that can come from needing to compile your Sass code, because Sass code needs to be compiled, it makes it more difficult to troubleshoot errors in a CSS file. It would be ideal if you could make changes or modifications to the CSS file for immediate website changes, but when you’re using Sass to write your CSS it doesn’t work that way.

For example, imagine your browser says there’s an issue on line 76, but when you go back to your Sass document, there’s something completely different written on line 76. While similar, your SCSS documents and CSS documents won’t be identical meaning you’ll have to take extra time and effort to find and fix the problem.

Extra Learning

To use Sass, you’ll have to go beyond learning CSS to not only learning the new SCSS syntax, but you’ll also need to learn how to run Dart on your computer in order to do it. Fortunately, SCSS and CSS are similar enough that Sass won’t be difficult to pick up. But learning to run your first compiler from the command line…that can be a non-trivial learning curve for a new developer!

(back to top)

Who uses Sass?

The simple answer—everyone. When it comes to developers, you’d find Sass being used by individuals who may be coding as a hobby or using it to build a website. Developers for large organizations also use Sass for creating complex web applications. Companies like Asana, Trivago, and Robinhood are said to use Sass in their style sheets.

In addition, many popular web development frameworks, like Bootstrap, Django, and Ruby on Rails, integrate with Sass. Using their programming languages—Python and Ruby, respectively—different commands let you build Sass/SCSS files in the framework.

Sass is a useful skill that has its benefits in all areas of web development. When looking for a job as a front end developer or full stack developer, knowing how to use Sass to build websites and applications can give you a leg up on the competition.

How to Learn Sass

The first step to learning SASS is to learn CSS. Knowing HTML and CSS are a necessary foundation for any web developer. Once you’re skilled in CSS, you can build on this information to learn Sass, which will ultimately help you save time in development. If you already know HTML and CSS, the documentation and guide on the Sass website are an ideal place to start learning how to use this easier, time-saving CSS preprocessor.

If you’re interested in learning more about CSS, check out our video on the topic:

(back to top)

Is Tech Right For you? Take Our 3-Minute Quiz!

You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals