SCSS vs. CSS: Learn the Key Differences and See Examples

Understand the differences between SCSS and CSS, plus learn other key front-end skills for web developers. Get examples and explanations to improve skills even for beginners.

Look at a website on any web browser. What’s the first thing that you see?

Provided your connection is good, it’ll be the visuals that catch your eye before you’re able to read anything on the page. Front-end elements and modules such as the colors, fonts, and overall layout of a webpage play a critical role in a website’s aesthetic experience.

Today’s web designers have many options for styling the front-end elements of a webpage. In this article, we’ll look at the difference between the two most popular, CSS and its superset SCSS, various code snippets with formatting as well as where they fit in within the larger world of web development languages.  

CSS basics

Cascading Style Sheets (CSS) is the default styling language for a webpage. Alongside HTML (which handles the structure of a webpage) and JavaScript (a scripting language that makes web pages interactive) CSS is one of the big three fundamental web technologies recognized by the World Wide Web Consortium (WC3).

CSS is a stylesheet language, which is a type of language that takes a markup language (e.g., HTML) and describes how that markup will be presented.

Here’s an example of how CSS can be used to style web pages:

--CODE language-markup line-numbers--
body{
color: #6fda44;
font-family: Neuemontreal, sans-serif; 
font-size: 16px;
}

‍

SCSS basics

SCSS is short for Sassy CSS, and is one of two syntaxes available for the CSS preprocessor Syntactically Awesome Style Sheets (Sass).

As a superset of CSS, all valid CSS is also valid SCSS. Files written in SCSS are saved with the .scss extension. Below is an example of SCSS:

--CODE language-markup line-numbers--
$green: #6fda44;
body{
color: $green;
font-family: Neuemontreal, sans-serif; 
font-size: 16px;
}

‍
Sass also supports an older syntax that is not a superset of CSS also referred to as Sass. Stylesheets written with this older syntax use indentation instead of curly braces and end with the .sass extension. Because this older syntax is not a superset of CSS, it is considered best practice to use SCSS instead.

The main goal of CSS preprocessors like Sass is to extend the functionality of plain CSS with a more powerful CSS syntax that lets you do more with less. We’ll dive more into this extensibility in the next section, where we compare SCSS and CSS directly.

SCSS vs. CSS: Key differences

Because CSS is just a stylesheet language, it wasn’t long before web designers sought improvements to the web standard for their projects to reduce the amount of repetitive coding required to style a page.

Enter CSS preprocessors like Sass, which extend the functionality of CSS by adding the ability to declare variables, create functions, use mixins, and nest maps (basically key indexed arrays in Sass) like you would with a full-featured programming language (such as Python). Additional features like these enable front-end developers to create themes that can be used to quickly change the look and feel of your site without having to mess with the layout or site structure.

Consider the CSS code below:

--CODE language-markup line-numbers--
body {
background: #6fda44;
 color: #ffffff;
}

.navbar {
  font: Neuemontreal, sans-serif;
  color: #ffffff;
  font-weight: 600;
}

‍

While this is perfectly fine for smaller projects, you can quickly see how repetitive it would be to have to keep declaring the same styles over and over again. It’s even worse when you need to remember to update all your stylesheets whenever you update your site’s overall theme.

Here’s the same styling in SCSS:

--CODE language-markup line-numbers--
$background-color: #6fda44;
$text-color: #ffffff;
$neufont: Neuemontreal, sans-serif;
$font-weights: (
    "regular": 300,
    "bold": 600,
    "large": 800
);

body {
    background: $background-color;
    color: $text-color;
}

.navbar{
    font: $neufont;
    color: $text-color;
    font-weight: map-get($font-weights, bold);
}

‍

Notice how we can declare styles upfront, and invoke them throughout the rest of the website. We can also declare multiple styles within a data structure, called a map, as we did with $font-weights, and use the map-get command to retrieve the relevant style.

SCSS also supports functions and mixins:

--CODE language-markup line-numbers--
/* This is a function, it can accept arguments and return values. */ 
@function pow($base, $exponent) {
  $result: 1;
  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}

.sidebar {
  float: left;
  margin-left: pow(4, 3) * 1px;
}

/* this is a mixin, it can be used to define styles to be reused across your stylesheet */

@mixin rtl($property, $ltr-value, $rtl-value) {
  #{$property}: $ltr-value;

  [dir=rtl] & {
    #{$property}: $rtl-value;
  }
}

.sidebar {
  @include rtl(float, left, right);
}

‍

Advanced features like this make it easier to update the styles later as we only have to change the code in one place to implement style changes. In this way, preprocessors like Sass help us save time by reducing repetitive tasks in CSS.

Getting started with SCSS

To use SCSS you will need to install Sass. The Sass docs provide a number of options for getting Sass up and running on your machine. Here is a brief rundown of the installation options:

• Install a Sass compiler extension through your IDE. The simplest way to get started with Sass is to just add a compiler to your favorite integrated development environment (IDE). For example, VS Code has Live Sass Compiler, which compiles your SCSS files into minimized CSS files you can push to production. When you make changes to an SCSS stylesheet, its corresponding CSS file is automatically updated upon saving.
• Install Sass with an app. There are many web development tools that already include Sass as part of their toolkits. Common examples include CodeKit (Mac only) and LiveReload.
• Install Sass from a JavaScript library (NPM). If you like using node package manager (NPM) to install packages from the terminal, Sass supports two main packages that work with the standard JavaScript API. The slower sass package has better compatibility because it is written in pure JavaScript. The sass-embedded package wraps a JS API around the Dart VM for a performance boost.
• Other language libraries. Community-maintained wrappers for Sass exist for other popular development languages such as Java, Ruby, and Swift.

Many of these methods will allow you to install Sass from your inline command. Here are some examples:

NPM for Node.js

--CODE language-markup line-numbers--
1 | npm install -g sass

Chocolatey package manager for Windows

--CODE language-markup line-numbers--
1 | choco install sass

Homebrew for Mac OS or Linux

--CODE language-markup line-numbers--
1 | brew install sass/sass/sass

‍

Find web development projects on Upwork

In this article, we discussed the differences between CSS and its superset SCSS as well as their larger role in the world of web design and development. CSS is the defacto web standard for styling a web page, while the preprocessor Sass and its SCSS syntax extend CSS with the programming features you need to do more with less. Both skills empower web designers and developers alike to style the front-end elements of a website.

On Upwork, the world’s work marketplace, finding a web developer or design 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 CSS and SCSS skills to work? Apply to CSS jobs on Upwork today!