Atomic Bulldog - UI/pattern library

7.4 - min(#{bp(your bp)}){}

Source: mixins/_media-queries.scss, line 36

Open in new window

@include min($bp, $max: "null", $device: "screen"){}

Parameters:

  • $bp - Breakpoints are defines in the map variables $breakpoints, breakpoints can be called with the function bp(). As we call a function inside a mixin we will need to use sass interpolation, #{bp()}. This will return a value in em.
  • $max - Optional max value, using $breakpoints map
  • $device - Default screen

Usage:

  • h2{@include min(#{bp(sm)}){font-size: font-size(2);}}

Output:

  • @media only screen and (min-width: 36em) {h2{font-size: 2.5rem;}