tools.responsive/_tools.responsive.scss at master · treeframework/tools.responsive · GitHub

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
// =============================================================================
//
// Name:          Responsive-tools
//
// Description:   Sets up our media query mixin.
//
// Markup:
//
// .foo {
//     font-size: 18px;
//
//     @include media-query(palm) {
//         font-size: 14px;
//     }
//
// }
//
// =============================================================================


// Here we set a variable assuming that responsive settings are not set
// globally. If they have been previously been defined, the following variable
// will be overriden and will be set to `true`.

$tree-responsive-settings: false !default;

@if ($tree-responsive-settings == false) {
    @warn "Oops! Have you included a responsive settings file?"
}


@mixin media-query($mq) {

    $breakpoint-found: false;

    // Loop through the list of breakpoints we’ve provided in our settings file.
    @each $breakpoint in $breakpoints {

        // Grab the alias and the condition from their respective locations in
        // the list.
        $alias:     nth($breakpoint, 1);
        $condition: nth($breakpoint, 2);

        // If the media query we’ve specified has an alias and a condition...
        @if $mq == $alias and $condition {

            // ...tell the mixin that we’ve found it...
            $breakpoint-found: true;

            // ...and spit it out here.
            @media #{$condition} {
                @content;
            }

        }

    }

    // If the user specifies a non-existent alias, send them a warning.
    @if $breakpoint-found == false {
        @warn "Oops! Breakpoint ‘#{$mq}’ does not exist."
    }

}