General

mixins

media

@mixin media($min: null, $max: null) { ... }

Description

Generate a media query using one or two integers.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$min

min-media value.

Int or Nullnull
$max

max-media value.

Int or Nullnull

Example

@include media( 480, 768 ) =>
@media only screen and (min-width: 480px) and (max-width: 767px) {}

Output

A media query built from the provided values.

Used by

  • [mixin] bp

Author

  • Tom Slominski

bp

@mixin bp($min: null, $max: null) { ... }

Description

Generate a media query using one or two breakpoint names.

The default breakpoints are:

  • sm: 480
  • md: 768
  • lg: 1024
  • xl: 1280
  • xxl: 1600
  • xxxl: 1920

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$min

min-media breakpoint.

String or Nullnull
$max

max-media breakpoint.

String or Nullnull

Example

@include bp( sm, md ) =>
@media only screen and (min-width: 480px) and (max-width: 767px) {}

Output

A media query built from the provided values.

Requires

Author

  • Tom Slominski