+responsive

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

@media queries

SASS

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

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

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

SCSS

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

SASS

+mode('draft')


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

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

SCSS

@include mode('draft');


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

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

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

@media queries with alias

SASS

+component('button')
  +register
    +responsive('{<sm}', '@media (max-width: 360px)')

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

  +responsive('{<sm}')
    display: block

SCSS

@include component('button') {
  @include register {
    @include responsive('{<sm}', '@media (max-width: 360px)');
  }
  @include default {
    display: inline-block;
    background-color: grey;
  }
  @include responsive('{<sm}') {
    display: block;
  }
}

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

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

@media queries with alias defined globally

If you define +global-responsive('{<sm}', '@media (max-width: 360px)') then you can register just alias in every component. See +global-responsive mixin.

SASS

+component('button')
  +register
    +responsive('{<sm}')

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

  +responsive('{<sm}')
    display: block

SCSS

@include component('button') {
  @include register {
    @include responsive('{<sm}');
  }
  @include default {
    display: inline-block;
    background-color: grey;
  }
  @include responsive('{<sm}') {
    display: block;
  }
}

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

The mixins and functions used in the code above: component, register, default, responsive, global-responsive.

@container queries

The same goes for container queries:

SASS

+component('button')
  +register
    +responsive('@container (max-width: 240px)')
    +responsive('@container modal-window (max-width: 360px)')
    +responsive('{modal<md}', '@container modal-window (max-width: 720px)')
    +responsive('{modal<lg}') // registered globally

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

  +responsive('@container (max-width: 240px)')
    display: block

  +responsive('@container modal-window (max-width: 360px)')
    display: inline-flex

  +responsive('{modal<md}')
    display: flex

  +responsive('{modal<lg}')
    display: grid

SCSS

@include component('button') {
  @include register {
    @include responsive('@container (max-width: 240px)');
    @include responsive('@container modal-window (max-width: 360px)');
    @include responsive('{modal<md}', '@container modal-window (max-width: 720px)');
    @include responsive('{modal<lg}'); // registered globally
  }
  @include default {
    display: inline-block;
    background-color: grey;
  }
  @include responsive('@container (max-width: 240px)') {
    display: block;
  }
  @include responsive('@container modal-window (max-width: 360px)') {
    display: inline-flex;
  }
  @include responsive('{modal<md}') {
    display: flex;
  }
  @include responsive('{modal<lg}') {
    display: grid;
  }
}

button {
  display: inline-block;
  background-color: grey;
}
@container (max-width: 240px) {
  button {
    display: block;
  }
}
@container modal-window (max-width: 360px) {
  button {
    display: inline-flex;
  }
}
@container modal-window (max-width: 720px) {
  button {
    display: flex;
  }
}
@container modal-window (max-width: 1024px) {
  button {
    display: grid;
  }
}

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

It doesn't have to be just @media or @container query

When mutation match the "responsive" semantic then it can be used just like +context mixin with any selector.

SASS

+component('button')
  +register
    +responsive('html.mobile-portrait')

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

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

SCSS

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

SASS

+mode('draft')


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

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

SCSS

@include mode('draft');


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

button {
  display: inline-block;
  background-color: grey;
}
html.mobile-portrait button {
  display: block;
}

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