SCSS: Миксины для mobile queries
07.08.2017

SCSS позволяет применять mixin'ы, которые значительно упрощают жизнь. В данной статье я покажу, как работать с media queries.

Константы для работы с media queries и сами mixin'ы:

$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;
    }
}

Пример:

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