Boostrap 4 Stylus Media Queries

2016-06-17

Bootstrap 4 media queries if you want to reuse them in your stylus stylesheet.

Explanation

Here is a visual representation of Bootstrap 4 responsive breakpoints.

34em
48em
62em
75em
xs
sm
md
lg
xl

Declaration

1
2
3
4
5
6
7
8
9
$xs-and-smaller = '(max-width: 33.9em)'
$sm-and-smaller = '(max-width: 47.9em)'
$md-and-smaller = '(max-width: 61.9em)'
$lg-and-smaller = '(max-width: 74.9em)'

$sm-and-larger = '(max-width: 34em)'
$md-and-larger = '(max-width: 48em)'
$lg-and-larger = '(max-width: 62em)'
$xl-and-larger = '(max-width: 75em)'

Usage

You can then use these variables like so:

1
2
3
4
.yourClass
width 50%
@media $xs-and-smaller
width 100%

Or

1
2
3
4
.yourClass
width 100%
@media $sm-and-larger
width 50%

There are many other ways to do this, but that’s the one that feels the most comfortable and readable to me. Would be happy to read yours.