media screen scss mixin

1    // respond is the name of your mixin
2
3    @mixin respond ($breakpoint) {
4
5        // $breakpoint is simply a variable that can have several values
6
7        @if $breakpoint==tablet {
8
9            // here `laptop` is the value of $breakpoint
10            // when call laptop, we mean the following piece of code        
11
12        @media only screen and (max-width: 600px) {
13          @content;
14        }
15      }
16
17      @if $breakpoint==mobile {
18        @media only screen and (max-width: 480px) {
19          @content;
20        }
21      }
22    }
23