Stylus file to define break-points for responsive web sites

break-points.styl

$xs-max = 575px
$sm-min = 576px
$sm-max = 767px
$md-min = 768px
$md-max = 991px
$lg-min = 992px
$lg-max = 1199px
$xl-min = 1200px

xs-screen()
  @media screen and (max-width: $xs-max)
    {block}

sm-screen()
  @media screen and (min-width: $sm-min) and (max-width: $sm-max)
    {block}

md-screen()
  @media screen and (min-width: $md-min) and (max-width: $md-max)
    {block}

lg-screen()
  @media screen and (min-width: $lg-min) and (max-width: $lg-max)
    {block}

xl-screen()
  @media screen and (min-width: $xl-min)
    {block}

larger-than(size)
  @media screen and (min-width: size)
    {block}

smaller-than(size)
  @media screen and (max-width: size)
    {block}