In Linux we trust!

SCSS: Mixins for mobile queries

SCSS allows you to use mixins, that can 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;
    }
}