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);