SASS Создания медиа запросов с использованием функции и аргументов

Question

Имеется следующий SASS файл с некоторыми данными:

@import './functions'

$media-1024: 1024
$media-1280: 1280
$media-default: 1920
$media-2560: 2560


@function calcResolution($value, $resolution, $originalResolution: $media-2560)
    $difference: $resolution / $originalResolution
    @return to-fixed($value * $difference)


@mixin media-1024 
    @media (max-width: #{$media-1024 + 1px})
        @content

@mixin media-1280
    @media (max-width: #{$media-1280 + 1px})
        @content

@mixin media-default
    @media (max-width: #{$media-default + 1px})
        @content

@mixin media-2560
    @media (max-width: #{$media-2560 + 1px})
        @content

Есть функция calcResolution() которая возвращает значение на основе разницы между разрешениями. Таким образом для большинства изображений можно прописать следующий код и он будет отрабатывать как нужно:

@include media-default // 1920
    width: calcResolution(50, $media-default) // 1920 / 2560 * 50 = ‭37.5‬
    height: calcResolution(100, $media-default) // 1920 / 2560 * 100 = 75

Визуально это выглядит так:

.btn
    $font-size: 18px
    font-size: $font-size

    @include media-default
        font-size: calcResolution($font-size, $media-default)

    @include media-1280
        font-size: calcResolution($font-size, $media-1280)

    @include media-1024
        font-size: calcResolution($font-size, $media-1024)

Много дублирующегося кода, который довольно неприятно выглядит:

Как мне объединить миксины в один чтобы не дублировать код?

Может есть ещё какие-то другие способы решения?

Answer 1

Вместо нескольких одинаковых миксинов можно сделать один, принимающий список размеров и выводящий сразу все необходимые media, например

@mixin media($sizes) {
  @each $size in $sizes {
    @media (max-width: #{$size + 1px}) {
      @content($size);
    }
  }
}

При этом, внутри передаваемого контента можно обращаться в переменной $size

$sizes: $media-default, $media-1280, $media-1024;

@include media($sizes) using ($size){
  font-size: calcResolution($font-size, $size);
}

БЛОГ НА HUSL

SASS Создания медиа запросов с использованием функции и аргументов

Ответы (1 шт):