File size: 924 Bytes
74aacd5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// Define Breakpoints
$breakpoints: (
  mobile-res: 768px,
  desktop-res: 1224px,
);

// Calcualte Min and Max Widths Based on Breakpoints
$sizes: (
  mobile-max-width: calc(map-get($breakpoints, mobile-res) - 1px),
  tablet-min-width: map-get($breakpoints, mobile-res),
  tablet-max-width: calc(map-get($breakpoints, desktop-res) - 1px),
  desktop-min-width: map-get($breakpoints, desktop-res),
);

// Mobile Mixin
@mixin mobile {
  @media screen and (max-width: map-get($sizes, mobile-max-width)) {
    @content;
  }
}

// Tablet Mixin
@mixin tablet {
  @media screen and (min-width: map-get($sizes, tablet-min-width)) and (max-width: map-get($sizes, tablet-max-width)) {
    @content;
  }
}

// Desktop Mixin
@mixin desktop {
  @media screen and (min-width: map-get($sizes, desktop-min-width)) {
    @content;
  }
}

@mixin large {
  @media screen and (min-width: map-get($sizes, tablet-min-width)) {
    @content;
  }
}