+responsive

Mixin +responsive works similar to mixin +context. The main difference is in semantics and that you can use media queries.

SASS

+mode('draft')

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

  +responsive('html.mobile-portrait')
    display: block
 
  +responsive('@media (max-width: 360px)')
    display: flex

SCSS

@include mode('draft');

@include component('button') {
  @include default {
    display: inline-block;
    background-color: grey;
  }
  @include responsive('html.mobile-portrait') {
    display: block;
  }
  @include responsive('@media (max-width: 360px)') {
    display: flex;
  }
}

SASS

+mode('strict')

+component('button')
  +register
    +responsive('html.mobile-portrait')
    +responsive('@media (max-width: 360px)')

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

  +responsive('html.mobile-portrait')
    display: block

  +responsive('@media (max-width: 360px)')
    display: flex

SCSS

@include mode('strict');

@include component('button') {
  @include register {
    @include responsive('html.mobile-portrait');
    @include responsive('@media (max-width: 360px)');
  }
  @include default {
    display: inline-block;
    background-color: grey;
  }
  @include responsive('html.mobile-portrait') {
    display: block;
  }
  @include responsive('@media (max-width: 360px)') {
    display: flex;
  }
}

button {
  display: inline-block;
  background-color: grey;
}
html.mobile-portrait button {
  display: block;
}
@media (max-width: 360px) {
  button {
    display: flex;
  }
}

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