assets/sass/_mixins.scss


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

// - - - - - - - - - - - - - - - - - -
// Mixins
// - - - - - - - - - - - - - - - - - -

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Responsive
// Usage: @include mq(tabletp) {}

$break-phonel: 480px;
$break-tabletp: 768px;
$break-tabletl: 1024px;
$break-laptop: 1220px;
$break-desktop: 1600px;

@mixin mq($media) {
  @if $media == phonel {
    @media only screen and (min-width: $break-phonel) { @content; }
  }
  @else if $media == tabletp {
    @media only screen and (min-width: $break-tabletp) { @content; }
  }
  @else if $media == tabletl {
    @media only screen and (min-width: $break-tabletl) { @content; }
  }
  @else if $media == laptop {
    @media only screen and (min-width: $break-laptop) { @content; }
  }
  @else if $media == desktop {
    @media only screen and (min-width: $break-desktop) { @content; }
  }
}