Skip to content

Responsive mixins

These helper mixins simplify working with breakpoints and media queries.

Define breakpoints first

Responsive mixins work based on the names and values of breakpoint tokens. To use these mixins, ensure that you have first defined breakpoint tokens.

Media queries

The query() mixin defines styles within a media query block:

Using the query() mixin

// Set breakpoints
@include set(breakpoint, (
  tablet:  768px,
  desktop: 1280px,
  cinema:  1600px
));

// Use the `query()` mixin in other stylesheets
.my-component {
  // @media (min-width: 768px)
  @include query(tablet) {
    background-color: white;
  }

  // @media (min-width: 768px)  [Same as above]
  @include query(from tablet) {
    background-color: white;
  }

  // @media (min-width: 769px)
  @include query(above tablet) {
    background-color: lightgrey;
  }

  // @media (max-width: 768px)
  @include query(until tablet) {
    background-color: lightgrey;
  }

  // @media (max-width: 767px)
  @include query(below tablet) {
    background-color: grey;
  }

  // @media (min-width: 768px) and (max-width: 1280px)
  @include query(tablet to desktop) {
    background-color: black;
  }
}

Responsive properties

The responsive() mixin lets you define values of properties at specific breakpoints:

Using the responsive() mixin

// Declare a single responsive property
.my-component {
  @include responsive(color, (
    _ :      white, // @media (min-width: 0px)
    desktop: black  // @media (min-width: 1280px)
  ))
}

// Declare a multiple responsive properties of tbe same value
.my-component {
  @include responsive((margin-bottom, margin-top), (
    _ :     1rem,   // @media (min-width: 0px)
    tablet: 1.5rem, // @media (min-width: 768px)
    cinema: 2rem    // @media (min-width: 1600px)
  ))
}

Responsive typographic scale

The type-scale() mixin generates font size and line height declarations within its parent block. Ensure that each font-size token has a corresponding line-height token of the same name. For more info, see the "Font sizes + Line heights" section.

Using the type-scale() mixin

// Set font sizes
@include set(font-size, (
  small: 1rem,
  body:  2rem,
  headline: (
    _:       3rem,
    desktop: 4rem
  )
));

// Set line heights
@include set(line-hight, (
  small: 1.5rem,
  body:  3rem,
  headline: (
    _:       4.5rem,
    desktop: 6rem
  )
));   

// Use the `type-scale()` mixin in other stylesheets
.my-component {
  @include type-scale(small);

  // font-size: 1rem;
  // line-height: 1.5rem;
}   

.another-component {
  @include type-scale(headline);

  // font-size: 3rem;
  // line-height: 4.5rem;
  //
  // @media (min-width: 1280px) {
  //   font-size: 4rem;
  //   line-height: 6rem;
  // }
}