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.


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.



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


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?