Skip to main content
U.S. flag

An official website of the United States government

Dot gov

Official websites use .gov
A .gov website belongs to an official government organization in the United States.

Https

Secure .gov websites use HTTPS
A lock ( ) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

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);
    
Looking for U.S. government information and services?

Visit USA.gov