Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

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