How To Use Sass Variables

Posted: 13 Oct 2015 05:30 AM PDT

Think of all the times you might add the same color to different elements or classes in your CSS file and then think of all the fun you have changing everything when you decide another color would work better. Wouldn't you prefer to make the change once and have the rest update automatically?

Sass Variables are a way to store information that you want to reuse throughout your stylesheet. Variables are coming to CSS, but there's not much support at the moment and it's going to be awhile before you can use them. Fortunately they're available in Sass right now and they're easy to use.

A Simple Example Using Variables

To set a variable in Sass you give the variable a name beginning with a $.

1  2  3

$background    $primary-type-size    $heading_colo

All three are examples of variable names. Due to historical considerations and backwards compatibility, dashes and underscores are interchangeable. In other words $font-size and $font_size are the same variable and you can use either and even mix and match dashes and underscores throughout your document.

Setting the value of a variable is just as easy.

1  2  3  4

$background: #fff;    $primary-type-size: 1em;    $heading_type: &quot;helvetica&quot;;    $mainType: &quot;georgia&quot;;

The variable names above were arbitrary choices on my part and I'm not suggesting any are good names. My goal was to show you a few different ways you could name variables. You can use single words, dashes, underscores, and camel case notation.

Referencing variables in the rest of your code is also quite easy.

1  2  3  4  5  6

body {background: $background;}    h1 {font-family: $heading_type;}    p {      font-family: $mainType;      font-size: $primary-type-size;    }

All you have to do is use the variable where you would normally add a value. The Sass above will compile to:

1  2  3  4  5  6

body {background: #fff;}    h1 {font-family: &quot;helvetica&quot;;}    p {      font-family: &quot;georgia&quot;;      font-size: 1em;    }

If you later decide that Times New Roman would be a better font choice for your main copy, you just change the variable.

1	$primary-type-size: "times new roman";

When your .scss file (or .sass if you prefer the original syntax) compiles to .css, the value will be updated wherever you used the $primary-type-size variable.

In the examples here, I've only used each variable once, but I'm guessing you can see the power of variables given how often we all tend to use the same values throughout a stylesheet.

Allowed Characters in Variable Names

I haven't found any definitive information about what characters you can and can't use in variable names. The best I found comes from this Stack Overflow thread and it suggests the following are all allowed.

Any ASCII letter.
Any number 0–9 (as long as it is not the first character in the name).
Underscores and hyphens.
ASCII punctuation (!"#$%&'()*+,./:;<=>?@[]^{|}~) and spaces, if escaped with a backslash.
Unicode characters in the ranges 0080-D7FF, E000-FFFD, or 10000–10FFFF.
Unicode hex escape sequences such as 00E4

My advice would be to stick with simple names with simple characters. Use letters, numbers, dashes, and underscores and leave it at that. Name variables like you would classes and ids. Make them semantic and understandable to real people working in the code.

While I can't definitively tell you which characters are and aren't allowed, I can definitively say, I've never had a problem with any of the names I've chosen following the advice in the last paragraph.

Variable Scope

The variables in the previous examples have been global variables and they could be used anywhere throughout your Sass file. You can also define variables inside a selector and make them local variables.

When a variable is defined locally it's only available within the level of nested selectors where it's defined.

1  2  3  4  5  6  7  8  9  10

$background: #fff;    body {      $background: #ccc      background: $background;    }    article {      background: $background;    }

Here I've defined the variable $background in two places, once globally (outside of any selector) and once locally (inside the body selector). I've given each variable a different value. The global $background is white (#fff) and the local $background is a light gray (#ccc).

In this example, the body uses the local $background and gets a CSS background color of light gray (#ccc). The local variable overrides the global variable within the scope of the selector. The article selector uses the global $background and gets a background color of white (#fff).

You can define a global variable within a selector using !global.

1  2  3  4  5  6  7  8  9  10

$background: #fff;    body {      $background: #ccc !global;      background: $background;    }    article {      background: $background;    }

Here the $background variable is defined as global inside the body, which overwrites the global variable set initially. Both body and article will get a light gray background with this code.

Default Values in Variables

If you aren't sure if a variable has an assigned value you can make use of !default.

1	$main-font-size: 1em !default;

The idea is if there isn't yet a variable $main-font-size with an assigned value, then it will now be 1em, however, if the variable was previously assigned a value, use that value instead.

1  2  3  4

$main-font-size: 1.25em;    $main-font-size: 1em !default;    body {font-size: $main-font-size}

Normally when you list the same variable twice with different values, the one that comes second would be the one used. The !default flag, however, says to set the value on the second only if the variable doesn't yet have a value. Since the $main-font-size variable already had a value, Sass will use the initial value and compile to:

1	body {font-size: 1.25em;}

!default is useful in mixins (which I'll get to in the next round of this series), because it allows you to write a mixin with a !default value if no value is given, but it also allows that default to be overridden when a value is given.

Edwin Morris offers a use case that doesn't involve mixins, though it does involve @imports, which I'll also cover in the next round of this series.

Variable Interpolation

Interpolation is way to use the value of a variable as part of the name of a selector or property. You define the variable the same way, but you reference it using a different syntax.

1	#{$variable}

Like !default, interpolation is more useful with some things we haven't yet talked about, but here's a simple, if not exactly useful, example so you can see how interpolation works.

1  2  3  4  5  6  7

$name-1: background;    $name-2: border;    div {      #{$name-1}-color: #fff;      #{$name-2}-color: #000;    }

Here I defined two variables ($name–1, and $name–2) and then referenced them using interpolation syntax. The Sass compiles to:

1  2  3  4

div {      background-color: #fff;      border-color: #000;    }

You can see that the values of each variable replaces the interpolation syntax. Without the interpolation syntax, the values could only replace the variable where CSS values are normally allowed.

Hugo Giraudel offers some realistic use cases for interpolation in an article he wrote for Tuts+. It does talk about some Sass features, we haven't yet talked about here, but you can take a look if you want to know when you might use interpolation.

Closing Thoughts

Variables are one my favorite features of Sass. I think they're easy enough to understand and they're also easy work with. The hardest part is deciding what to name them.

Variables save time by keeping important values in a single location instead of spread throughout your stylesheet. They help make maintenance simple and they can help you set up prototypes that are quick and easy to change based on client feedback. I'll show you how in a future post.

Without question they're the main reason I stopped writing CSS and switched to writing Sass and I think they'll become a favorite of yours as well.

Let's leave Sass for now, though I'll come back with another round of posts soon. For the next few weeks I want to get back to SVG and talk about how you can work with text rendered as an SVG.

Download a free sample from my book Design Fundamentals.

The post How To Use Sass Variables appeared first on Vanseo Design.