SCSS: Mixins for mobile queries
07.08.2017

SCSS allows you to use mixins, that make you life easier. In this article i will show you how to use mixins in the combination of media query.

Mixins and relative constants:

$tablet_width: 650px;
$desktop_width: 1000px;
@mixin mobile {
    @media (max-width: #{$tablet_width - 1px}) {
        @content;
    }
}
@mixin tablet {
    @media (min-width: #{$tablet_width}) and (max-width: #{$desktop_width - 1px}) {
        @content;
    }
}
@mixin desktop {
    @media (min-width: #{$desktop_width}) {
        @content;
    }
}
@mixin not_desktop {
    @media (max-width: #{$desktop_width - 1px}) {
        @content;
    }
}
@mixin not_mobile {
    @media (min-width: #{$tablet_width}) {
        @content;
    }
}

Example:

@include mobile {
    body { font-size: 14px; }
}
@include not_mobile {
    div.mobile_menu { display: none; }
}
Теги → scss css mixin media query