breakpoints_mixin.scss

// =============================================================================
// Медиа запросы
// =============================================================================

// меньше указанной величины (по умолчанию ширина)
@mixin below($width, $orientation: 'width') {
    @media screen and (max-#{$orientation}: $width) {
        @content;
    }
}

// больше указанной величины (по умолчанию ширина)
@mixin above($width, $orientation: 'width') {
    @media screen and (min-#{$orientation}: $width) {
        @content;
    }
}

// между первой и второй величиной (по умолчанию ширина)
@mixin between($minWidth, $maxWidth, $orientation: 'width') {
    @media screen and (min-#{$orientation}: $minWidth) and (max-#{$orientation}: $maxWidth) {
        @content;
    }
}

// =============================================================================
// Функции пересчета значений
// =============================================================================

@function rem($num) {
    $strip-unit: $num / ($num * 0 + 1);
    @return $strip-unit / 16 * 1rem;
}

@function em($num, $root: 16) {
    $strip-unit: $num / ($num * 0 + 1);
    @return $strip-unit / $root * 1em;
}