+state

SASS

+component('button')
  +register
    +state(':hover')

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

  +state(':hover')
    background-color: yellow

SCSS

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

SASS

+mode('draft')


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

  +state(':hover')
    background-color: yellow

SCSS

@include mode('draft');


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

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

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