When you are designing web page using SASS or any other css techniques. You should have to design it for all the devices. Devices have different width and height. Create a separate file _devices.scss and define the standard width in following way:

$desktop-xl: “(max-width: 1200px)”;
$desktop-max: “(min-width: 1024px)”;
$desktop-min: “(max-width: 1024px)”;
$tablet-max: “(min-width: 768px)”;
$tablet-min: “(max-width: 768px)”;
$small-device: “(min-width: 568px)”;
$mobile-device: “(max-width: 568px)”;

How to use above media queries in SASS?

.header{
    @media #{$tablet-min}{
        width:100%;
   }
}
Advertisements