+context

SASS

+mode('draft')

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

  +context('ui-modal')
    display: block

SCSS

@include mode('draft');

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

SASS

+mode('strict')

+component('button')
  +register
    +context('ui-modal')

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

  +context('ui-modal')
    display: block

SCSS

@include mode('strict');

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

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

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