Sass

Prefer the .scss syntax over the .sass syntax.

scss-lint

Every project should start with the .scss-lint.yml present here. It hews fairly closely to the default configuration with a few exceptions. The default configuration is explained on the project's linters page.

Notable exceptions:

• use the BEM convention for selectors
• prefer double quotes

Whitespace

Use space between neighboring nested blocks, but not before or after.

Good

.btn {
  display: inline-block;
  font-size: 15px;

  &:hover {
    box-shadow: 0 5px 7px $box-shadow-color;
  }

  &:active {
    box-shadow: 0 1px 3px $box-shadow-color;
    color: $green-dark;
  }
}

Bad

.btn {

  display: inline-block;
  font-size: 15px;

  &:hover {
    box-shadow: 0 5px 7px $box-shadow-color;
  }

  &:active {
    box-shadow: 0 1px 3px $box-shadow-color;
    color: $green-dark;
  }

}

Bad

.btn {
  display: inline-block;
  font-size: 15px;
  &:hover {
    box-shadow: 0 5px 7px $box-shadow-color;
  }
  &:active {
    box-shadow: 0 1px 3px $box-shadow-color;
    color: $green-dark;
  }
}