SASS effectively gives us a lot of the programmatic benefits of working with code, only now with the ability to apply it to stylesheets.

Over the next few posts we’ll be diving right into the features of SASS.

First up let’s introduce variables.

Definition

Variables are a way to store information that you want to reuse throughout your stylesheet.

They allow us to store values for colors, fonts or really any CSS value that you want to reuse!

We use the $ symbol when we wish to make something a variable.

Example

In our SCSS, let’s define a color variable:

$color-primary: #ffff00; // Yellow
 
body {
  background-color: $color-primary;
}

This will of course, set our background-color to yellow. It’s that simple!

Note: You can use single line comments in Sass with //.

When we then run our compile, it’ll output the following CSS:

body {
  color: #ffff00;
}

Note: We'll be covering the compilation process further on in this series. For now it’s good to know that when we save our code into sass/main.scss, it’ll automatically compile into the css/style.css file!

This becomes extremely powerful when working on large projects!

If you wish to make a change to a colour used throughout your stylesheets, it’s much simpler to alter if the color is defined in one location as a single variable.

The alternative to changing the value of one variable defined at one location is finding and replacing every reference to the value you want to change. This is a much more tedious task, especially if you want to implement a quick change to test out a different color or font.

Related Posts:


Tim profile image

A little about me..

Hey, I’m Tim! 👋

I’m a freelance business owner, web developer & author. I teach both new and experienced freelancers how to build a sustainable and successful freelancing business. Check out my Complete Guide to Freelancing if you'd like to find out more.

While you're here, you can browse through my blogs where I post freelancing tips, code tutorials, design inspiration, useful tools & resources, and much more! You can also join the newsletter, or find me on X.

Thanks for reading! 🎉