Transitioning from CSS to SCSS: A Practical Guide

Moving from plain CSS to SCSS – setting up a compiler, renaming files, and introducing variables, mixins, and nesting step by step.

What SCSS is

SCSS is a preprocessor that extends CSS with variables, nesting, mixins, and other features. Browsers do not understand SCSS directly – you compile it to CSS first. The good news: any valid CSS is also valid SCSS, so your existing knowledge carries over.

Setting up your environment

You need something to compile SCSS into CSS before the browser sees it.

1. Install Node.js: Comes with npm, which you use to install the Sass compiler.
2. Install a compiler: Sass is the official one. Install via npm:

   npm install -g sass

3. Pick an editor: VS Code works well with SCSS extensions for syntax highlighting and autocompletion. Use whatever editor you like – the important thing is SCSS support.

Converting CSS to SCSS

The simplest first step: rename your .css files to .scss. Plain CSS works as-is inside an SCSS file.

Example

/* CSS */
.button {
  background-color: blue;
  color: white;
}

Rename to .scss and it compiles without changes.

SCSS features worth adopting

Variables

Define colours, font sizes, and other repeated values once.

$primary-color: blue;

.button {
  background-color: $primary-color;
}

Nesting

Nest selectors to mirror your HTML structure. Keep it shallow – three levels max.

.navbar {
  ul {
    list-style: none;

    li {
      display: inline-block;

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

Mixins

Reusable blocks of CSS you can include wherever needed.

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
}

Partials and imports

Split styles into partial files (prefixed with _) and import them into a main file.

// _variables.scss
$primary-color: blue;

// styles.scss
@import 'variables';

Loops and conditionals

SCSS supports programming-style logic in your stylesheets.

Example: loop

@for $i from 1 through 12 {
  .col-#{$i} { width: 100% / 12 * $i; }
}

Example: conditional

$theme: dark;

body {
  @if $theme == dark {
    background-color: black;
    color: white;
  } @else {
    background-color: white;
    color: black;
  }
}

Tips for transitioning

1. Start small: Convert one file at a time.
2. Refactor gradually: Introduce variables and mixins as you touch existing code, not all at once.
3. Keep good CSS habits: SCSS should make CSS easier, not more complicated.

Next steps

Once the basics feel natural, look at functions, maps, and more advanced mixins. The rest of this series covers those in detail.

Moving from CSS to SCSS is incremental. Rename a file, add a variable, extract a mixin. Each small step builds on what you already know.