Variables in Sass can be seen as simple versions of symbols in Fireworks or Illustrator, or as Smart objects in Photoshop; the most basic way of making a value appear in multiple places while still being able to update it where it was defined.
It prevents you from having to search through your code, trying to find all the places where you specified a certain number or name. Change the value of the variable and all the instances where it’s used will update along with it.
Any single property that will be repeated in the code, such as a color or a size, usually benefits from being declared with a variable to allow the designer to make changes easier and quicker.
For instance, if the height of an element needs to be the same as the height of another element, it can be useful to set that height as a variable, making sure it will stay the same wherever it occurs. An example of this is the height of controls such as buttons, selects, inputs or the default size of a radius. This could be declared like so:
$control-height: 40px; // applied to any control that needs the same height.
$radius: 5px;
Whenever these sizes are needed, they are simply entered instead of a value:
height: $control-height; // instead of height: 40px;
The reason for naming the first variable control-height and not just
control is that you don’t know if the name control defines a color, a width
or a height, so a descriptive naming convention like this one is useful.
When specifying the properties of text, it’s often helpful to let the base size of the font steer other sizes, in order to keep the typography manageable and consistent. If your base font size is 16 pixels you can specify all the other typography related sizes with 16 pixels as a base. If the base changes, every other type related size will update to prevent relationships from breaking.
$font-size: 16px;
$line-height: $font-size * 1.6;
$h1-size: $font-size * 2; // all other fonts are related to $font-size.
To cater for all the tweaking and updating that graphic design requires, it’s
not only a good idea to put colors into variables, but even to name the colors
in a generic way, so that if the contrast color of a page suddenly needs to
change from blue to green, you won’t have to go through the entire code to find
all the variable instances of $blue-color.
Instead, naming it something like $contrast-color can be a good idea. The
generic naming concept goes for simple things such as fundamental colors like
white or black as well. You might want the color black to be a dark gray
instead of pitch black, or the white to be slightly off-white. Declaring
variables such as $white-color and $black-color can then be helpful.
$default-color: gray;
$font-color: darken($default-color, 60%);
$light-color: lighten($default-color, 20%);
$dark-color: darken($default-color, 20%);
$contrast-color: teal;
$warning-color: yellow;
$important-color: red;
$information-color: blue;
$black-color: lighten(black, 5%);
$white-color: darken(white, 5%);
The $font-color in the example above is based on the $default-color. While
this is a handy way of making sure everything stays consistent and has the same
foundation, it’s important to keep these dependencies in mind when updating the
variables to prevent any unwanted changes to happen when one variable is
updated.
Variable dependencies are also very useful for complex layout calculations. Create inter-dependent variables to be able to reference things like widths with paddings included, widths without paddings, width of a text field in a div, and so on:
$container-width: 960px;
$container-padding: 80px;
$container-inner-width: $container-width - (2 * $container-padding);
$gutter-in-container: 10px;
$text-width: 60%;
$image-in-container-width: $container-inner-width - ($text-width -$gutter);
What’s next
If you found this useful, you might also enjoy:
- Bourbon (Sass mixins)
- Neat’s variables (responsive grid framework in Sass)
- Bitters (default Sass variables)