Beginner's guide to Sass

And why Sass?

CSS keeps evolving. One of the biggest milestones is variables in CSS. But there are still tedious tasks left. Imagine you need to write multiple sets of similar styles in your stylesheet. Even if you create special classes for each variation, plain CSS doesn't give you a clean way to share, compose, or reuse them. And what if you want to update or replace a single value across dozens of files?

Sass (Syntactically Awesome Style Sheets) is a mature CSS preprocessor that fills these gaps. With Sass — written as SCSS, a superset of CSS — you get variables, mixins, functions, nesting, partials, and a proper module system. Change a value in one place and the entire compiled stylesheet updates. This article walks through installing Sass and its core features for beginners.

Installation

Heads up — this article was originally written in 2018. Back then, the recommended way to install Sass was gem install sass (Ruby Sass). Ruby Sass was officially deprecated on March 26, 2019 and is no longer maintained. The current, official implementation is Dart Sass, installed via npm (or as a standalone binary). Use the instructions below instead of the old Ruby steps.

Install Dart Sass with npm (recommended)

If you already use Node.js for your project, install Sass as a dev dependency:

npm install --save-dev sass

Or with Yarn:

yarn add --dev sass

Then add a script to your package.json to compile SCSS to CSS:

"scripts": {
  "sass": "sass --watch src/style.scss:dist/style.css"
}

Run it with npm run sass and Sass will watch the input file and recompile whenever it changes.

Or use the standalone binary

Don't want Node.js? Grab a prebuilt binary from the Dart Sass releases page, add it to your PATH, and you can run the sass command directly from your terminal. Homebrew users on macOS can also run brew install sass/sass/sass.

Verify (prints the current Sass version):

sass --version

Preprocessing

How to start

We need two stylesheets for this tutorial—one .css and one .scss. We'll call them style.css and style.scss, both inside a folder named app. Run:

sass --watch app/style.scss:app/style.css

The sass command compiles Sass to CSS. With this command, the input (app/style.scss) is compiled to the output (app/style.css). Sass will watch the input for changes and recompile automatically. Most projects also generate a source map (app/style.css.map) alongside the CSS so browser devtools can trace compiled rules back to the original SCSS.

Examples

Variables

In Sass, you can store values in variables ($) and reuse them across the entire stylesheet.

compiles to:

Mixins

Mixins are one of my favorite Sass features. Writing vendor prefixes for every property is tedious; with @mixin, you can write them once and reuse them everywhere. Here's how I use it for opacity:

We can pass values with $ to make the mixin flexible.

compiles to:

Functions

We can use @function in Sass. In the example below I use a function to convert px to rem (and vice versa). You can also use operators like +, -, *, and % in Sass. (Note: in modern Dart Sass, / for numeric division has been replaced by the math.div() function from the built-in sass:math module — / is reserved for CSS shorthand such as font: 16px/1.5.)

The original article shipped a px/rem fallback because very old IE versions lacked rem support. That's no longer necessary in 2026 — rem is supported in every browser still in the wild, including IE 11's EOL build — so you can treat the fallback snippet below as a historical example.

compiles to:

Nesting

With Sass you can nest CSS rules like HTML, giving your styles a clearer visual hierarchy—more readable, organized, and clearer.

compiles to:

Modern Sass: @use and @forward

One more thing worth knowing if you're learning Sass in 2026: the old @import rule is being phased out. Modern Dart Sass uses a proper module system built around two rules:

• @use loads another Sass file as a namespaced module. Unlike @import, variables and mixins from the loaded file don't leak into the global scope — you access them with namespace.$variable or namespace.mixin-name().
• @forward re-exports members from another module, which is how you build a clean "entry point" file (often called _index.scss) for a folder of partials.

A typical structure looks like this:

// _colors.scss (a "partial" — filename starts with _)
$primary: #ff5722;
$text: #222;

// style.scss
@use 'colors';

body {
  color: colors.$text;
  background: colors.$primary;
}

If you see tutorials using @import, they still work for now but will eventually be removed. For any new project, start with @use / @forward.

Takeaway

I hope you enjoyed this short tutorial on Sass / SCSS. Sass makes CSS easier to maintain, more readable, and reduces tedious work — variables, mixins, functions, nesting, and the @use/@forward module system are the pieces you'll reach for every day. You can check my GitHub repository to see how I use Sass on this portfolio. To get in touch, visit my LinkedIn or email ghsspower@gmail.com. Thanks!