Sass: Basic Understanding

Learn the basics of Sass (Syntactically Awesome Style Sheets) and how to enhance your CSS workflow with features like variables, nesting, mixins, and more. Perfect for beginners in web development.

The first time you open a stylesheet with 2,000 lines and six slightly different blues that are all supposed to be the same blue, you get it. Plain CSS doesn’t stop you from repeating yourself. Sass does. This is a beginner’s tour of how it works and how to fold it into your day.

Skill Pre-requisites

You’ll follow along more easily if you’re comfortable with:

• HTML
• CSS
• Basic programming ideas, including strings, $variables, if statements, and for loops.

What is Syntactically Awesome Style Sheets (Sass)?

Sass is a preprocessor: you write in SassScript, and it compiles down to regular CSS that browsers understand. Nothing about your markup or hosting changes. You just get a better language to author in, with variables, nesting, and mixins that plain CSS has historically lacked.

One thing worth knowing up front: the current, official implementation is Dart Sass. The older node-sass (built on LibSass) is deprecated and no longer maintained, so start new projects on Dart Sass and don’t waste time on the old engine. You can read more here.

Sass ships in two syntaxes: .scss, which looks like CSS with braces and semicolons, and the older indented .sass. The examples below are SCSS, which is what most teams use.

Sass Strong Features

Here are the features you’ll reach for first, and why each one earns its place.

1. Variables

Variables let you store a value once (a color, a font, a size) and reuse it everywhere. Change the value in one spot and it updates across the whole stylesheet. No more find-and-replace on a hex code you swore you’d standardized.

// Sass variables sample.
$primary_color: #13292A;

.header {
    background-color: $primary_color;
}

.footer {
    border: 1px solid $primary_color;
}

2. Nesting

Nesting lets you write rules inside their parent, so your CSS mirrors the shape of your HTML. It reads well and keeps related selectors together. One caveat: go too deep and you create brittle, over-specific selectors, so keep it a few levels at most.

// Sass nesting sample.
.gridbox {
    max-width: 200px;
    margin: 0 auto;

    h3 {
        text-transform: uppercase;
        background-color: #ff0000;
    }

    p {
        font-size: 1rem;
        line-height: 1.4;
    }
}

3. Partials

Partials let you split one giant stylesheet into small files (named with a leading underscore, like _mixins.scss) and pull them together into one build. That keeps each concern in its own place.

The sample below uses @import. Fair warning: Sass has deprecated @import and is phasing it out. The modern replacement is @use and @forward, which don’t leak variables and mixins into a global namespace. For new work, reach for those instead.

// Sass partials sample.

// Site CSS.
@import "resets";
@import "helpers/mixins";
@import "site/base";
@import "site/layout";

// Extra Plugins.
@import "plugins/woocommerce";
@import "plugins/jetpack";

4. Extend

@extend lets one selector inherit another’s rules, so shared styles don’t get copied around. It’s handy when several elements start from the same base and differ only a little.

// Sass extend sample.
.gridbox {
    background-color: #ffffff;
    border: 1px solid #ffaaaa;
    border-radius: 5px;
    font-size: 16px;
    padding: 20px;
}

.gridbox-compact {
    @extend .gridbox;
    padding: 10px;
    border-radius: 3px;
    font-size: 14px;
}

5. Operators

Sass does math: addition, subtraction, multiplication, and more. That’s useful for computing sizes and spacing instead of hardcoding numbers you’ll have to chase down later.

// Sass operators sample.
$default_size: 5px;
$bolder: $default_size * 2;

.box {
    @if ( $default_size >= 5 ) {
        color: #f5f5f5;
    } @else {
        color: #e5e5e5;
    }
}

6. Mixins

Mixins are the payoff. You define a reusable block of declarations once, then @include it wherever you need it, optionally passing arguments. Pair that with a @function, which computes and returns a value, and you keep your code DRY.

// Reset margin and padding.
@mixin resetMarPad() {
    margin: 0;
    padding: 0;
}

// Function for converting a px-based font-size to rem.
@function calculateRem($size) {
    $remSize: $size / 16px; // rem value = size * root html pixel.

    // Default font size on html element is 100%, equivalent to 16px.
    @return #{$remSize}rem;
}

// Mixin that includes the fallback px declaration as well as the calculated rem value.
@mixin fontSize($size) {
    font-size: $size;
    font-size: calculateRem($size);
}

.btn {
    @include resetMarPad();
    background: #ff0000;
    color: #ffffff;
    @include fontSize(24px);
}

One note on that function: using / for division is deprecated in Dart Sass. In current code you’d write math.div($size, 16px) after pulling in the built-in math module with @use "sass:math". The sample above shows the older style you’ll still run into in existing projects.

Conclusion

Sass earns its keep by removing repetition. Variables, nesting, partials, extend, operators, and mixins all point at the same goal: write a value or a pattern once, reuse it everywhere, and change it in one place.

Pick one feature and use it on your next stylesheet. Variables are the easiest win. Once that clicks, the rest follows.