scss

SCSS

Our standard for writing SCSS.

Table of Contents

• Comments
• Sizing
• Nesting depth
• Extend and Include

Comments

• Single-line and multi-line comments in SCSS should use //. These comments will be removed when compiled to CSS.

  // bad
  /* this comment will get output the the uncompressed CSS */
  
  // good
  // this comment will NOT get output the the uncompressed CSS
  
  // also good
  // This is a very long comment that might span multiple lines and
  // therefore might want to span across two lines

Sizing

• Where possible, sizes should use ems or percentages - especially for font sizes.

  // bad
  .block {
      font-size: 24px;
      width: 300px;
  }
  
  // good
  .block {
      font-size: 1.5em;
      width: 30%;
  }

  Further reading

  • Nomensa: Text resizing tips

Nesting depth

• Nested styles must not exceed 4 levels.

  // bad
  .block {
  
      .block__element {
          ...
  
          .block__title {
              ...
  
              .block__title-heading {
                  ...
  
                  .block__heading-sub {
                      // ...stuff...
                  }
              }
          }
      }
  }
  
  // good
  .block {
  
      &__heading-sub {
          ...// ...stuff...
      }

Extend and Include

• @extend rules should be positioned at the top of the style.

  // bad
  .block {
      // ...stuff...
      @extend .another-class;
  }
  
  // good
  .block {
      @extend .another-class;
      // ...stuff...
  }

• @include rules should be positioned at the top of the style but below @extend rules.

  // bad
  .block {
      @include opacity(1);
      @extend .another-class;
      // ...stuff...
  }
  
  // good
  .block {
      @extend .another-class;
      @include opacity(1);
      // ...stuff...
  }

• @includes with inner @content often involve @media rules that rely on the cascade or nested rule sets and therefore should be included after regular properties. @include rules that are positioned below styles should be separated by a new line.

  // bad
  .block {
      @include opacity(1);
      @extend .another-class;
      // ...stuff...
      @include breakpoint($mobile) {
          // ...stuff...
      }
  }
  
  // good
  .block {
      @extend .another-class;
      @include opacity(1);
      // ...stuff...
  
      @include breakpoint($tablet) {
          // ...stuff...
      }
  }

Variables

• Use hyphenated variables with clear and descriptive names.

  // bad
  $brandColor: #f00;
  $brand_color: #f00;
  $brd-clr: #f00;
  
  // good
  $brand-color: #f00;

• Global variables should be defined in a _vars.scss file.

• Component specific variables should be defined at the top of the relavant SCSS file and be prefixed with the component name.

  // bad
  $background-color: #f00;
  
  // good
  $foobar-background-color: #f00;