SCSS vs Sass: What’s the Difference?

If you're new to front-end development, it won’t be long until you hear about Sass and SCSS and how these CSS preprocessors can greatly streamline your CSS development workflows.

But what exactly is the difference between these two technologies? Are they the same tool or two different technologies? And which one should you use? In this blog post, we'll break down the differences between SCSS and Sass, and help you decide which one is best for you.

Table of contents

• Why use a CSS preprocessor anyway?
• What is Sass and how does it work?
• What is SCSS and how does it work?
• SCSS vs. Sass: Which syntax should you use?
• Finding work as a Sass or CSS developer

Why use a CSS preprocessor anyway?

CSS, or Cascading Style Sheets, is a style sheet language used for describing the presentation of a document written in a markup language. A style sheet is a collection of rules that tells a web browser how to display a document written in HTML or XML. While CSS is great for designing the aesthetics of a webpage, it lacks a lot of the features modern programming languages have that make programmers more productive.

Enter CSS preprocessors, tools designed to help you write CSS. They can make your CSS more readable and easier to maintain, usually by adding programming features that help web developers and designers alike avoid repetitive code. Let’s take a closer look at Sass and SCSS and the features they use to accomplish this.

Related: SCSS vs. CSS: Learn the Key Differences and See Examples gives a more detailed breakdown of the differences between SCSS and CSS.

What is Sass and how does it work?

Sass, short for syntactically awesome style sheets, is a CSS preprocessor designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006. Like all CSS preprocessors, Sass extends the functionality of vanilla CSS with time-saving programming features. These include:

• Nesting, which is the ability to nest code within code. Not only is this look cleaner, but inheritance allows you to write more concise CSS logic.
• Variables, which allow you to store values in one place that can be used throughout a stylesheet, cutting down on repetitive code.
• Functions, which allow you to store complex operations in one place and use them elsewhere throughout your code.
• Mixins, which allow you to create groups of CSS declarations that can be reused throughout a stylesheet.

As you can see, the main benefit of Sass is the ability to adhere to the DRY (don’t repeat yourself) principle.

While vanilla CSS would require you to rewrite the same styles over and over again, Sass gives you the features you need to reuse values, functions, and styles as you see fit throughout your codebase. These features can make stylesheets easier to design and maintain, especially across larger web projects.

What is SCSS and how does it work?

SCSS, short for Sassy CSS, is one of two syntaxes available for Sass. A true superset of CSS, all valid CSS is also valid SCSS, meaning SCSS will understand any CSS code that you write. SCSS files end with the .scss extension and can be compiled into CSS files which can be pushed to production. Below is an example of SCSS code:

--CODE language-markup line-numbers--
@function double($n) {
 $result: $n * 2;
 @return $result;
}

.element {
 width: double(5);
}

This function takes a number as an argument and doubles it. So, if we called the function with “double(5),” it would return “10.” Our SCSS would then compile to vanilla CSS like so:

--CODE language-markup line-numbers--
.element {
 width: 10;
}

SCSS functions can be used for a variety of purposes, such as creating mixins, generating dynamic values, or even abstracting away vendor prefixes. By making use of SCSS functions, you can keep your code DRY and make your CSS more maintainable.

Related:  What Is SCSS? Learn How To Use SCSS To Style HTML provides more code examples of how SCSS can be used to extend the functionality of vanilla CSS.

SCSS vs. Sass: Which syntax should you use?

By now it should be clear that the question of SCSS vs. Sass is a bit of a misnomer. SCSS is simply one of two available syntaxes supported by the preprocessor Sass. That said, the confusion on the web is understandable when you consider Sass’s historical context.

Earlier we mentioned that SCSS was one of two syntaxes supported by Sass. The older original syntax, which is now referred to as the “indented syntax” is also colloquially referred to as Sass.

Let’s take our earlier SCSS function example and convert it to the indented syntax:

--CODE language-markup line-numbers--
@function
double($n)
$result: $n * 2
.element
width: double(5)

As you can see, the two syntaxes are virtually identical, except for the following differences:

• Uses indentation instead of “{}” to delimit blocks
• Replaces semicolons with new lines to separate statements
• Files end with the .sass extension

As a consequence of these differences, property declarations and selectors must be placed on their own lines and indented for the Sass to compile correctly to CSS. The two syntaxes are interoperable with each other, so it’s a matter of personal preference which you use for Sass.

Finding work as a Sass or CSS developer

In this article we discussed the differences between SCSS and Sass, as well as their place in the world of web development. Whether you choose to use the CSS superset SCSS or the older indented syntax, Sass can  give you the programming features you need to streamline your CSS development workflows.

On Upwork, the world’s work marketplace, finding a Sass project is as simple as signing up for an account, creating an Upwork profile, and applying directly to projects with a well-written Upwork job proposal.  

Ready to put your Sass-enhanced CSS skills to work? Apply to CSS jobs on Upwork today!