Skip to content

Instantly share code, notes, and snippets.

@tawanorg
Forked from olegpolyakov/bootstrap-mq.scss
Created April 4, 2019 13:18
Show Gist options
  • Save tawanorg/3765272f207d09e113d8caa99a05a40d to your computer and use it in GitHub Desktop.
Save tawanorg/3765272f207d09e113d8caa99a05a40d to your computer and use it in GitHub Desktop.
Bootstrap Sass Media Query Variables
//== Media queries breakpoints
// Extra small screen / phone
$screen-xs: 480px;
$screen-xs-min: $screen-xs;
// Small screen / tablet
$screen-sm: 768px;
$screen-sm-min: $screen-sm;
// Medium screen / desktop
$screen-md: 992px;
$screen-md-min: $screen-md;
// Large screen / wide desktop
$screen-lg: 1200px;
$screen-lg-min: $screen-lg;
// So media queries don't overlap when required, provide a maximum
$screen-xs-max: ($screen-sm-min - 1);
$screen-sm-max: ($screen-md-min - 1);
$screen-md-max: ($screen-lg-min - 1);
$screen: "only screen";
$xs-up: $screen;
$xs-only: "#{$screen} and (max-width: #{$screen-xs-max})";
$sm-up: "#{$screen} and (min-width: #{$screen-sm-min})";
$sm-only: "#{$screen} and (min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max})";
$md-up: "#{$screen} and (min-width: #{$screen-md-min})";
$md-only: "#{$screen} and (min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})";
$lg-up: "#{$screen} and (min-width: #{$screen-lg-min})";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment