+default

Mixin default must be used when element has more mutations. And it should go always first.

Reason: In addition to wanting maximum code semanticity and equal visual indentation compared to other mutations, with default mixin we can verify that the block with the default mutation is always at the first position in the element block when parsing the SASS. And if it is not, the parser will point it out.

Note: this rule can be suppressed by using +mode('draft') before the component. See the +mode mixin.

SASS

+component('button')
  +register
    +variant('.primary')

  +default
    display: inline-block
    background-color: grey

  +variant('.primary')
    background-color: green

SCSS

@include component('button') {
  @include register() {
    @include variant('.primary');
  }
  @include default {
    display: inline-block;
    background-color: grey;
  }

  @include variant('.primary') {
    background-color: green;
  }
}

SASS

+mode('draft')


+component('button')
  +default
    display: inline-block
    background-color: grey

  +variant('.primary')
    background-color: green

SCSS

@include mode('draft');


@include component('button') {
  @include default {
    display: inline-block;
    background-color: grey;
  }

  @include variant('.primary') {
    background-color: green;
  }
}

button {
  display: inline-block;
  background-color: grey;
}
button.primary {
  background-color: green;
}

The mixins and functions used in the code above: component, default, variant, register, mode.

Without default

When element has no mutations then +default mixin can be ommited. It should be used only with combination of other mutations.

SASS

+component('button')
  display: inline-block
  background-color: grey

SCSS

@include component('button') {
  display: inline-block;
  background-color: grey;
}

button {
  display: inline-block;
  background-color: grey;
}

The mixins and functions used in the code above: component.

Cobination: with and without default

This applies to each element block separately. When an element has no mutations then +default mixin can be ommited and if other element has some mutations then +default mixin must be used.

SASS

+component('button')
  +register
    +variant('.primary')
    +element('.icon')
    +element('.text')

  +default
    display: inline-block
    background-color: grey

  +variant('.primary')
    background-color: green

  +_________________________
  +element('.icon')
    display: inline-block
    width: 1.5em
    height: 1.5em
    opacity: 0.75

  +_________________________
  +element('.text')
    +default
      white-space: nowrap
      vertical-align: middle

    +variant('.primary')
      font-weight: bold

SCSS

@include component('button') {
  @include register() {
    @include variant('.primary');
    @include element('.icon');
    @include element('.text');
  }
  @include default {
    display: inline-block;
    background-color: grey;
  }

  @include variant('.primary') {
    background-color: green;
  }

  @include _________________________;
  @include element('.icon') {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    opacity: 0.75;
  }

  @include _________________________;
  @include element('.text') {
    @include default {
      white-space: nowrap
      vertical-align: middle
    }

    @include variant('.primary') {
      font-weight: bold
    }
  }
}

SASS

+mode('draft')




+component('button')
  +default
    display: inline-block
    background-color: grey

  +variant('.primary')
    background-color: green

  +_________________________
  +element('.icon')
    display: inline-block
    width: 1.5em
    height: 1.5em
    opacity: 0.75

  +_________________________
  +element('.text')
    +default
      white-space: nowrap
      vertical-align: middle

    +variant('.primary')
      font-weight: bold

SCSS

@include mode('draft');

@include component('button') {
  @include default {
    display: inline-block;
    background-color: grey;
  }

  @include variant('.primary') {
    background-color: green;
  }

  @include _________________________;
  @include element('.icon') {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    opacity: 0.75;
  }

  @include _________________________;
  @include element('.text') {
    @include default {
      white-space: nowrap
      vertical-align: middle
    }

    @include variant('.primary') {
      font-weight: bold
    }
  }
}

button {
  display: inline-block;
  background-color: grey;
}
button.primary {
  background-color: green;
}

button .icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  opacity: 0.75;
}

button .text {
  white-space: nowrap;
  vertical-align: middle;
}

button.primary .text {
  font-weight: bold;
}

The mixins and functions used in the code above: component, default, variant, element, register, mode.