SCSS Syntax Deep Dive: Understanding the Basics

Variables, nesting, mixins, partials, operators, inheritance, functions, and comments.

The syntax of SCSS

SCSS (Sassy CSS) keeps all valid CSS and adds extra syntax on top. If you can write CSS, most of SCSS will feel familiar.

Variables

In plain CSS, you often repeat the same colour or font size across multiple selectors. SCSS variables let you store a value once and reuse it.

Declare a variable:

$primary-color: #3498db;

And use it:

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

Change the variable value and it updates everywhere it is used.

Nesting

Nesting lets you write CSS that mirrors your HTML structure, which tends to be easier to read and maintain.

For example:

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

Can be styled in SCSS as:

nav {
  ul {
    list-style: none;

    li {
      display: inline-block;

      a {
        text-decoration: none;
        color: $primary-color;

        &:hover {
          color: darken($primary-color, 10%);
        }
      }
    }
  }
}

The &:hover is a parent selector reference. Here it adds a hover state to the <a> tag.

Mixins

Mixins are reusable chunks of CSS you can drop into other selectors – a bit like functions in a programming language.

A simple mixin:

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

.container {
  @include flex-center;
}

This centres content with Flexbox and can be reused wherever you need that layout.

Partials and import

As projects grow, one giant SCSS file gets unwieldy. Partials are smaller SCSS files you import into a main file.

A partial is typically named with an underscore (_), like _variables.scss. Import it into your main SCSS file:

@import 'variables';

This keeps styles organised and makes large projects easier to maintain.

Operators

SCSS supports basic arithmetic: +, -, *, /, and %. Useful for sizing and layout calculations.

For example:

$content-width: 800px;
$padding: 20px;

.container {
  width: $content-width;
  padding: $padding;
  margin-left: ($content-width / 2) * -1;
}

Here, arithmetic calculates the negative margin for a centre-aligned container.

Inheritance and DRY

DRY (Don’t Repeat Yourself) means avoiding duplicated code. SCSS supports inheritance via the @extend directive, letting one selector inherit styles from another.

For instance:

.panel {
  border: 1px solid #ddd;
  padding: 10px;
  background: #f9f9f9;
}

.success-panel {
  @extend .panel;
  background: #dff0d8;
}

The .success-panel gets all the styles of .panel plus its own background colour.

Built-in functions

SCSS includes built-in functions, especially for colour manipulation. lighten, darken, saturate, and desaturate are common ones.

Example:

.button {
  background-color: lighten($primary-color, 20%);
  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

This adjusts button colours based on the primary colour variable.

Comments

SCSS supports single-line (//) and multi-line (/* */) comments. Single-line comments are stripped out when the file compiles to CSS, which keeps the output cleaner.

That covers the main syntax features. The next tutorials in this series go into each one in more depth.