Variables are without doubt my favorite feature of SCSS. I'm pretty sure I'd be using SCSS even if variables were the only improvement it offered over plain CSS. They are just so much better than CSS's awkward and lumpy custom props.

This is why it saddens me so much to see people not really using SCSS variables to their full potential. If you happen to be one of those people, here's a few ways you can change that ;)

Note: all the examples in this post are written in SCSS, since that is my preferred syntax, but as far as I know, the same general rules will apply to Sass.

Tip 1: Use scope

Usually when I see someone using SCSS variables, they use pretty much exclusively global variables. Setting font stack, font sizes, colors at the top of the document - you know, the usual thing.

However, it's good to always remember that SCSS variables support scope. This means that a variable declared in a block will only be accessible within that block. Like so:

.some-element {
  $some-spacing: 1em;
  // The variable can be used locally.
  padding-left: $some-spacing;
}

.another-element {
  // This will fail - the variable is not accessible here.
  padding-left: $some-spacing;
}

This means we can use variables whenever we need them, and we don't have to make a mess by declaring a truckload of globals at the top of the module.

Moreover, if we declare a global variable, like $primary, and then decide to change it for some unique section, we can do that locally without overwriting the global variable for the rest of the elements:

$primary: #03a;

.some-element {
  // This will override the variable's value in this block.
  $primary: #f06;
  color: $primary;
}

.another-element {
  // But here the original value will be applied.
  color: $primary;
}

Good old scoping gives us the liberty to declare new variables, without worrying that we'll inadvertently mess up global styles.

Tip 2: Avoid magic numbers

One thing I love about variables is that they give me an easy way to avoid using magic numbers in my code. So for example, if I have an element that will always be rectangular, instead of doing this:

.rectangular-element {
  width: 10em;
  height: 10em;
}

I can do this:

.rectangular-element {
  $size: 10em;
  width: $size;
  height: $size;
}

Next time I need to change the size of this element, I can update one variable instead of two properties. You might think this is a trivial change, but if an element has a lot of properties, having one variable that I know I'll be likely to update later at the top of the block is actually very helpful:

.some-element {
  // See how this is a bit easier to find?
  $size: 10em;
  position: absolute;
  top: 0;
  right: 0;
  margin-right: 1em;
  width: $size;
  height: $size;
  display: flex;
  justify-content: center;
  align-items: center;
}

This is even more useful if you're using nesting. A few blocks can then use a variable that is declared at the top of their parent block - very convenient!

Another way to leverage variables to avoid magic numbers is to look for patterns in the design. For example, you might encounter a layout where the designer has painstakingly unified all the spacings across the page. It would then be wasteful to throw away all this good work by doing this:

.some-element {
  margin: 3em 1em;
}

.another-element {
  margin: 3em 1em;
}

when instead we can do this:

.some-element {
  margin: $spacing-large $spacing-small;
}

.another-element {
  margin: $spacing-large $spacing-small;
}

This way we're again avoiding repetition, but also showing our understanding of the designer's intentions. And we can then thank our past selves once the designer's client decides that "all the spacings should be 2 pixels larger".

Tip 3: Keep looking

My top tip for working with SCSS variables is to always keep looking for better ways of working with SCSS variables. I started learning programming from OOP, so I tend to think about SCSS variables a bit like I would about C# or JS ones.

When you work on your other languages and learn practices connected to variables there, why not take a moment to think if what you learned can also be applied to SCSS variables? Flex that variable muscle, lest it becomes limp! 💪

If you have any cool tips on using SCSS variables yourself, I'll pay you handsomely in cookie emojis.