Media queries

View source

@use "@glsass/tools/tools.mq" as *;

mq()

Since v1.0.0

The mixin can be used to write responsive rules inside any selector.

@include mq($size: md, $max: false);

a {
  color: blue;

  @include mq(xl) {
    color: red;
  }
}

// CSS
a {
  color: blue;
}

@media (min-width: 1400px) {
  a {
    color: red;
  }
}

mq-max()

Since v1.0.0

This mixin is an alternative of the mixin by setting the $max variable automatically at true.

@include mq-max($size: md);

a {
  color: green;

  @include mq-max(xl) {
    color: yellow;
  }
}

// CSS
a {
  color: green;
}

@media (max-width: 1399px) {
  a {
    color: yellow;
  }
}