SCSS Media Queries - Responsive Breakpoint Mixins

10 Jan 2018

Here are some utility mixins for SCSS that you can use for quickly mocking up responsive CSS.

// Screen size variables
$screen-xs-min: 425px;  // Tiny phones
$screen-sm-min: 576px;  // Small tablets and large smartphones (landscape view)
$screen-md-min: 768px;  // Small tablets (portrait view)
$screen-lg-min: 992px;  // Tablets and small desktops
$screen-xl-min: 1200px; // Large tablets and desktops

// Mixins
@mixin xs { @media (min-width: #{$screen-xs-min}) {@content;} } // Tiny devices
@mixin sm { @media (min-width: #{$screen-sm-min}) {@content;} } // Small devices
@mixin md { @media (min-width: #{$screen-md-min}) {@content;} } // Medium devices
@mixin lg { @media (min-width: #{$screen-lg-min}) {@content;} } // Large devices
@mixin xl { @media (min-width: #{$screen-xl-min}) {@content;} } // Extra large devices

Use like so:

/* A class that will respond differently in different resolutions */
.sample-padding-class {

  padding-bottom: 200%; // Default property, this will be applied to all screen sizes
  color: #FFF;          // Unless overriden below

  @include sm {         // 576px window width and more
    padding-bottom: 100%;
    color: #000;
  }

  @include md {         // 768px window width and more
    padding-bottom: 50%;
  }

  @include lg {         // 992px window width and more
    padding-bottom: 10%;
  }

  @include xl {         // 1200px window width and more
    padding-top: 20%;
    padding-bottom: 0;
    color: #1337;
  }
}

Related Posts