Media Query For Responsive Design ( Sass )

Media Query For Responsive Design ( Sass ).scss

$small_mobile:'(max-width: 767px)';
$large_mobile: 'only screen and (min-width: 480px) and (max-width: 767px)';
$tab_device:'only screen and (min-width: 768px) and (max-width: 991px)';
$desktop: '(min-width: 1281px)';


|--| How to use ?

just add this code into your scss file 

body
{
  @media #{$small_mobile}{
      color: red;
    }
    @media #{$large_mobile}{
      color: blue;
    }
    @media #{$tab_device}{
      color: green;
    }
    @media #{$desktop}{
      color: black;
    }
}