#CSS #Stylus #Bootstrap

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

$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:

.yourClass
    width 50%
    @media $xs-and-smaller
        width 100%

Or

.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.

#CSS #Stylus #Bootstrap