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.

Inheritance

Mixins

  • Use mixins for groups of properties that appear together intentionally and are used multiple times.

    @mixin clearfix {
      &:after {
        content: '';
        display: table;
        clear: both;
      }
    }
    
  • Use mixins for components to change size.
  • Use mixins when something requires parameters.

    @mixin size($width, $height: $width) {
      width: $width;
      height: $height;
    }
    
  • Do not use mixins for browser prefixes. Use Autoprefixer.

    // Bad
    @mixin transform($value) {
      -webkit-transform: $value;
      -moz-transform: $value;
      transform: $value;
    }
    

Extend

Be very careful with using @extend. It’s a powerful tool that can have disastrous side-effects. Before using please consider:

  • Where is my current selector going to be appended?
  • Am I likely to be causing undesired side-effects?
  • How large is the CSS generated by this single extend?

If you’re unsure of using @extend, follow these rules to avoid running into trouble:

  • Use @extend from within a module, not across different modules.
  • Use @extend on placeholders exclusively, not on actual selectors.
  • Make sure the placeholder you extend is present as little as possible in the stylesheet.

You can use mixins in place of selectors. While mixins will copy more code, the difference will often be negligible once the output file has been gzipped.

Looking for U.S. government information and services?

Visit USA.gov