Grid

Mixins

@include xs, sm, md, lg, xl , xxl { };
@include smUp, mdUp, ... {};
@include xsOnly, smOnly, ... {};
@include sm-md, sm-lg, ... {}

Example

p {
font-size: 2em;
@include xl {
font-size: 1.5em;
}
@include sm {
font-size: 1em;
}
}

Size

How it works

$xs: 0px;
$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;
$xxl: 1500px;
@mixin sm {
@media (max-width: #{$md - 1px}) {
@content;
}
}
@mixin smUp {
@media (min-width: #{$sm - 1px}) {
@content;
}
}
@mixin smOnly {
@media (min-width: #{$sm}) and (max-width: #{$md - 1px}) {
@content;
}
}
@mixin sm-md {
@media (min-width: #{$sm}) and (max-width: #{$lg - 1px}) {
@content;
}
}