Variables

Create new variables in the following circumstances:
- The value is repeated twice
- The value is likely to be updated at least once
- All occurrences of the value are tied to the variable (for example not by coincidence)
When building scss that will be used across multiple projects use the !default flag to allow overriding.
```
$baseline: 1em !default;
```
The !global flag should only be used when overriding a global variable from a local scope.
Variables across the whole scss codebase should be placed in their own file.

When declaring color variables, don’t base the name on the color content.

// Bad
$light_blue: #18f;
$dark_green: #383;

// Good
$primary: #18f;
$secondary: #383;
$neutral: #ccc;

Be careful when naming variables based on their context.
```
// Bad
$background_color: #fff;
```
Don’t use the value of dimensional variables in the variable name.
```
// Bad
$width_100: 100em;

// Good
$width_lg: 100em;
```
Name all used z-indexes with a variable.

Have a z-index variable for each z-index used, and a separate variable, possibly aliased for where the z-index is used.

$z_index-neg_1: -100;
$z_index-neg_2: -200;
$z_index-1: 100;

$z_index-hide: $z_index-neg_2;
$z_index-bg: $z_index-neg_1;
$z_index-show: $z_index-1;

Responsive Design & Breakpoints

Set variables for breakpoints at the top of your stylesheet. This functionality is built into Bourbon.
```
$sm: new-breakpoint(min-width 0 max-width 40em $sm_cols);
```
Use variables to set the queries throughout so they are easy to adapt if necessary.
Place media queries nearest to the class they are affecting.

Rather than focusing on devices when deciding where to put breakpoints, focus on content; name breakpoint variables relative to each other.

// Bad
$iphone: new-breakpoint(min-width 0 max-width 640px 6);

// Good
$small: new-breakpoint(min-width 0 max-width 40em 6);
$medium: new-breakpoint(min-width 0 max-width 60em 6);