Variables, Mixins & Extend

Variables

All variables in SCSS should be declared inside _variables.scss file. The naming of variables should be semantically correct.

Bad Naming Convention

$red-dark: #.... 

Good Naming convention

$neeto-ui-pasted-red: #....

One good way to name variables is to prefix them with the project name. For example, neetoUI classnames are always prefixed with neeto-ui- and so on.

Mixins

The @mixin directive lets you create CSS code that is to be reused throughout the website.

// Example for media-query mixins
@mixin viewport($media) {
  @if $media==desk {
    @media screen and (min-width: $desk-1200) {
      @content;
    }
  } @else if $media==tab-min {
    @media screen and (max-width: $tab-1024) {
      @content;
    }
  } @else if $media==tab-only {
    @media screen and (min-width: $tab-768) and (max-width: $tab-1024 - 1) {
      @content;
    }
  } @else if $media==mob {
    @media screen and (max-width: $tab-768 - 1) {
      @content;
    }
  } @else if $media==xs-mob {
    @media screen and (max-width: $mob-479) {
      @content;
    }
  }
}

// Usage
@include viewport(mob);

Mixins should be used to DRY up your code, add clarity, or abstract complexity--in much the same way as well-named functions. Mixins that accept no arguments can be useful for this purpose, but note that if you are not compressing your payload (e.g. using gzip), this may contribute to unnecessary code duplication in the resulting styles.

Extend

The @extend directive lets you share a set of CSS properties from one selector to another.

The @extend directive is useful if you have almost identically styled elements that only differ in some small details.

Unlike mixins, which copy styles into the current style rule, @extend updates style rules that contain the extended selector so that they contain the extending selector as well. When extending selectors, Sass does intelligent unification:

.error {
  border: 1px #f00;
  background-color: #fdd;
}

.error--serious {
  @extend .error;
  border-width: 3px;
}

output CSS

.error,
.error--serious {
  border: 1px #f00;
  background-color: #fdd;
}
.error--serious {
  border-width: 3px;
}