respond-to

@include respond-to(
  $breakpoint,
  $responsiveColumns
) {
  /* ... */
};

Description

Define styles for various different screen sizes.

Parameters

$breakpoint (breakpoints)
The viewport width condition that you wish to target (e.g. max-width: 736px).

$responsiveColumns (boolean)
Determines whether to apply responsive styles when the element is inside a column of similar relative width to $breakpoint condition.

For example, when applying mobile styles to an element and this parameter is set to true, the styles will not only be applied on small screens, but also when the element is inside a thin column on larger screens.
Default: false

Return

(CSS) Scoped styles to apply when the viewport meets the $breakpoint condition.

📘

If your calling this mixin numerous times within the same element (i.e. when applying different styles to both tablet and mobile styles), they must be called in order of screen size, larger sizes first followed by smaller sizes.

Examples

Apply different colours to an element at different screen sizes

.foo {
  background: $secondaryLightest;
  color: $secondaryDarkest;
  
  @include respond-to('tablet') {
    background: $secondaryColor;
    color: white;
  }
  
  @include respond-to('mobile') {
    background: $secondaryDarkest;
    color: $secondaryLightest;
  }
}

Apply responsive styles to element when it is inside a column of similar width to the $breakpoint condition

.foo {
  background: transparent;
  border: 3px solid $secondaryColor;
  
  @include respond-to('mobile', true) {
    background: $secondaryColor;
  }
}