How to use function and mixin in Sass

When working with Sass both function and mixin is a handy feature that allows for advanced functionality.
This article just covers the basics, it's recommended to read the official documentation found under Links.
How to use function and mixin in Sass

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.
_Media.scss
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.
Index.scss
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
Index.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