SASS media query variables

Common sizes from frameworks and devices sizes for global media queries.

$bp-4:    "(min-width: 480px)";
$bp-7: "(min-width: 768px)";
$bp-9: "(min-width: 992px)";
$bp-12: "(min-width: 1200px)";
$bp-14: "(min-width: 1400px)";

Usage

@media #{$bp-9} {
// do something
}

TODO

  • Add reference. There was an article explaining the most common global media queries.

Let me know what you think on twitter @rdallaire

← Return to blog