Using Media Queries

Quickly create media queries with this mixin. It just handles max and min width for now.

The mixin picks up on the break point values defined in the config:

$bp-tiny: 320px;
$bp-xsmall: 480px;
$bp-small: 640px;
$bp-medium: 800px;
$bp-large: 960px;
$bp-xl: 1140px;

min-width mixin

Therefore, declaring the following is all you need.

@include minbreak($bp-medium) {
 background-color: red;
}

This will generate:

@media screen and (min-width: 800px) {
 background-color: red;
}

max-width mixin

The reverse can be achieved with:

@include maxbreak($bp-medium) {
 background-color: red;
}

Which will produce and max-width media query:

@media screen and (max-width: 800px) {
 background-color: red;
}

The mixin picks up on the break point values defined in the config: