Simple media queries Sass mixin that lets you think in pixel widths but the output is in ems.
//Mobile-first Media Query Mixin
@mixin forLargeScreens($media) {
@media (min-width: $media/16+em) { @content; }
}
//Usage
.selector {
width: 100%; //Properties for small screens
@include forLargeScreens(640) { // 640 ÷ 16 = 40
width: 50%; //Properties for large screens
}
}
//Compiles to
.selector {
width: 100%;
}
@media (min-width: 40em) {
.selector {
width: 50%;
}
}