+variant

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.