Intro to SCSS: Revolutionizing CSS with Syntactical Sassiness

SCSS (Sassy CSS) – a CSS preprocessor that adds variables, nesting, mixins, and other features on top of plain CSS. Browsers do not understand SCSS directly, so you compile it to standard CSS before deployment.

What is SCSS?

SCSS is a preprocessor scripting language that compiles into CSS. It keeps CSS syntax as its base and adds features that make stylesheets easier to write, organise, and maintain.

Why SCSS?

Plain CSS works, but larger projects expose its limits – repeated values, long selector chains, no way to reuse blocks of styles. SCSS addresses those with variables, nesting, mixins, and more.

Variables

Changing a colour scheme in plain CSS often means searching through hundreds of lines for every occurrence. SCSS variables let you store values once and reuse them. Update the variable and the change applies everywhere.

Here’s a simple example:

$primary-color: #3498db;

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

That sets $primary-color and applies it to the body’s background. Want a different colour site-wide? Change the variable.

Nesting

Nesting lets you write CSS selectors in a hierarchy that matches your HTML structure.

Consider this HTML:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <!-- Other list items -->
  </ul>
</nav>

In plain CSS:

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  text-decoration: none;
}

In SCSS, nested:

nav {
  ul {
    list-style: none;

    li {
      display: inline-block;

      a {
        text-decoration: none;
      }
    }
  }
}

The structure mirrors the HTML, which makes it easier to read and update.

Mixins

Mixins let you define a reusable set of CSS properties and include them in multiple selectors – similar to a function in a programming language.

If you apply border-radius frequently, a mixin handles the vendor prefixes once:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

@mixin defines the reusable block; @include applies it to a selector.

The compilation process

Browsers do not read SCSS, so you need a compiler. Node.js with npm handles this well. In VS Code, the ‘Live Sass Compiler’ extension watches your files and compiles them as you save – use whatever editor you prefer, but that is what I reach for.

Practical benefits

SCSS encourages modularity and DRY (Don’t Repeat Yourself) practices. Once you are used to it, going back to a large plain CSS file feels like unnecessary work.

Getting started

Moving from CSS to SCSS is straightforward. The syntax is familiar, and valid CSS is valid SCSS. You can start small – rename a file to .scss, add a variable or two, and expand from there.

The following articles go deeper into each feature with practical examples and best practices.