Reusable Sass media resizer

When creating responsive sites media resizing is important.
This article show how to make a media component that handles all device sizes
Reusable Sass media resizer

Content

  1 Media mixin
  2 How to use media mixin
    Links

Media mixin

This article explains how to create a reusable component that handles all device sizes and resizing.

First we create the _Media.scss file that will be referenced in all files that need media resizing.

Breakpoints

Name Device Size
XS Phone 0px
SM Tablet 576px
MD Laptop 768px
LG Computer 992px
XL Screen 1200px
XXL BigScreen 1920px
The file consist of two map's containing the breakpoint sizes, orientation and a mixin that can be referenced from importing the file.
MD is the most common breakpoint and is the default size for the mixin.
1
$mediaBreakpoints: ( XS: 0px, SM: 576px, MD: 768px, LG: 992px, XL: 1200px, XXL: 1920px );
2
$mediaDevices: ( Phone: XS, Tablet: SM, Laptop: MD, Computer: LG, Screen: XL, BigScreen: XXL );
3
$mediaOrientation: ( 0: Any, 1: Portrait, 2: Landscape );
4
5
@function mediaStr($size, $orientation, $mode, $minWidth, $maxWidth) {
6
    $mode: to-upper-case(inspect($mode));
7
    $size: to-upper-case(inspect($size));
8
    $width: map-get($mediaBreakpoints, $size);
9
    $query: null;
10
11
    @if ($minWidth) {
12
        $width: $minWidth;
13
    }
14
15
    @if ($mode == UP) {
16
        $query: "(min-width: " + $width + ")";
17
    }
18
    @else if ($mode == DOWN) {
19
        $query: "(max-width: " + $width + ")";
20
    }
21
    @else if ($mode == ONLY) {
22
        $query: "(min-width: " + $width + ")";
23
        $max: null;
24
25
        @if ($maxWidth) {
26
            $max: $maxWidth;
27
        }
28
        @else {
29
            @if ($size == XS) {
30
                $max: map-get($mediaBreakpoints, SM);
31
            }
32
            @else if ($size == SM) {
33
                $max: map-get($mediaBreakpoints, MD);
34
            }
35
            @else if ($size == MD) {
36
                $max: map-get($mediaBreakpoints, LG);
37
            }
38
            @else if ($size == LG) {
39
                $max: map-get($mediaBreakpoints, XL);
40
            }
41
        }
42
43
        @if ($max) {
44
            $query: $query + " and (max-width: " + $max + ")";
45
        }
46
    }
47
48
    @if not ($orientation == Any) {
49
        $query: $query + " and (orientation: " + to-lower-case(inspect($orientation)) + ")";
50
    }
51
52
    @return $query;
53
}
54
55
@mixin media($size: MD, $orientation: Any, $mode: Up, $minWidth: null, $maxWidth: null) {
56
    @media #{mediaStr($size, $orientation, $mode, $minWidth, $maxWidth)} {
57
        @content;
58
    }
59
}
60
61
@mixin device($device: Laptop, $orientation: Any, $mode: Up, $minWidth: null, $maxWidth: null) {
62
    $size: map-get($mediaDevices, $device);
63
64
    @media #{mediaStr($size, $orientation, $mode, $minWidth, $maxWidth)} {
65
        @content;
66
    }
67
}
68
                            
$mediaBreakpoints: ( XS: 0px, SM: 576px, MD: 768px, LG: 992px, XL: 1200px, XXL: 1920px );
$mediaDevices: ( Phone: XS, Tablet: SM, Laptop: MD, Computer: LG, Screen: XL, BigScreen: XXL );
$mediaOrientation: ( 0: Any, 1: Portrait, 2: Landscape );

@function mediaStr($size, $orientation, $mode, $minWidth, $maxWidth) {
    $mode: to-upper-case(inspect($mode));
    $size: to-upper-case(inspect($size));
    $width: map-get($mediaBreakpoints, $size);
    $query: null;

    @if ($minWidth) {
        $width: $minWidth;
    }

    @if ($mode == UP) {
        $query: "(min-width: " + $width + ")";
    }
    @else if ($mode == DOWN) {
        $query: "(max-width: " + $width + ")";
    }
    @else if ($mode == ONLY) {
        $query: "(min-width: " + $width + ")";
        $max: null;

        @if ($maxWidth) {
            $max: $maxWidth;
        }
        @else {
            @if ($size == XS) {
                $max: map-get($mediaBreakpoints, SM);
            }
            @else if ($size == SM) {
                $max: map-get($mediaBreakpoints, MD);
            }
            @else if ($size == MD) {
                $max: map-get($mediaBreakpoints, LG);
            }
            @else if ($size == LG) {
                $max: map-get($mediaBreakpoints, XL);
            }
        }

        @if ($max) {
            $query: $query + " and (max-width: " + $max + ")";
        }
    }

    @if not ($orientation == Any) {
        $query: $query + " and (orientation: " + to-lower-case(inspect($orientation)) + ")";
    }

    @return $query;
}

@mixin media($size: MD, $orientation: Any, $mode: Up, $minWidth: null, $maxWidth: null) {
    @media #{mediaStr($size, $orientation, $mode, $minWidth, $maxWidth)} {
        @content;
    }
}

@mixin device($device: Laptop, $orientation: Any, $mode: Up, $minWidth: null, $maxWidth: null) {
    $size: map-get($mediaDevices, $device);

    @media #{mediaStr($size, $orientation, $mode, $minWidth, $maxWidth)} {
        @content;
    }
}

                            
                        

How to use media mixin

When using the media mixin you import the _Media.scss file and use the media mixin in any Sass file.
First _Media.scss is imported as "Media" which exposes the media mixin.
1
@import "Media";
2
3
#Demo {
4
    font-size: 10px;
5
    font-weight: bold;
6
7
    &:hover {
8
        cursor: pointer;
9
    }
10
}
11
12
@include media() {
13
    #Demo {
14
        font-size: 19px;
15
    }
16
}
17
18
@include device() {
19
    #Demo {
20
        background-color: yellow;
21
    }
22
}
                            
@import "Media";

#Demo {
    font-size: 10px;
    font-weight: bold;

    &:hover {
        cursor: pointer;
    }
}

@include media() {
    #Demo {
        font-size: 19px;
    }
}

@include device() {
    #Demo {
        background-color: yellow;
    }
}
                            
                        
Generated CSS
1
#Demo:hover {
2
    cursor: pointer;
3
  }
4
  
5
@media (min-width: 768px) {
6
    #Demo {
7
        font-size: 19px;
8
    }
9
}
10
@media (min-width: 768px) {
11
    #Demo {
12
        background-color: yellow;
13
    }
14
}
                            
#Demo:hover {
    cursor: pointer;
  }
  
@media (min-width: 768px) {
    #Demo {
        font-size: 19px;
    }
}
@media (min-width: 768px) {
    #Demo {
        background-color: yellow;
    }
}
                            
                        

Comments

Name