+context

SASS

+component('button')
  +register
    +context('.modal')

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

  +context('.modal')
    display: block

SCSS

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

SASS

+mode('draft')


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

  +context('.modal')
    display: block

SCSS

@include mode('draft');


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

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

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