This is a mixin definition for a responsive layout in SASS (SCSS). Import this mixin anywhere in your sass files for responsive layout by replacing redundant media queries.

README.md

Usage

To use this mixin in your sass file:

Let's assume that your sass file is on the same directory level as this file,

@import "responsive-mixin"

.container{
  width: 50%;
  
  @include respond(tab){
    width: 75%;
  }
  
  @include respond(phone){
    width: 100%;
  }
  
}

This code with give an HTML element with class container a width of 50% normally, 75% width on medium screens and 100% width on small screens.

_responsive-mixin.scss

@mixin respond($breakpoint) {
    @if $breakpoint==phone {
        @media (max-width: 672px) {
            @content;
        }
    }
    @if $breakpoint==tab {
        @media (max-width: 880px) {
            @content;
        }
    }
    @if $breakpoint==main {
        @media (min-width: 880px) {
            @content;
        }
    }
}