Skip to main content


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


display: inline-block
background-color: grey

display: block

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

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

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