Смешанная функция, которая принимает css и возвращает медиазапросы, которые автоматически увеличивают / уменьшают некоторые значения

Question

В настоящее время я застрял в поиске следующего варианта использования:

Я сделал миксин, который возвращает медиа-запросы для его содержимого (здесь $breakpoint переменные - это только некоторые значения, определенные выше в файле)

@mixin responsive {
    @media screen and (min-width: $breakpointXS) {
        @content;
    }
    @media screen and (min-width: $breakpointSM) {
        @content;
    }
    @media screen and (min-width: $breakpointMD) {
        @content;
    }
}

Затем я могу использовать этот миксин следующим образом

.myElement {
    @include responsive {
        height: 20px;
        width: 50px;
    }
}

Но, как вы можете видеть, он в основном компилируется с этими 3 медиа-запросами с одинаковым содержанием в них. Я пытаюсь выяснить следующее:

1. Имейте этот 1 миксин responsive, но каким-то образом передайте ему базовые значения, например 20px для высоты и 50px для ширины.
2. Затем используйте эти базовые значения в XS медиа-запросе, но умножьте их на 1.2 в SM медиа-запросе и на 1.6 в MD медиа-запросе.

Таким образом, конец цель состоит в том, чтобы иметь одну функцию mixin, в которой я передаю базовые css / базовые значения, которые будут использоваться в наименьшем экранном медиа-запросе, и чтобы он выводил другие программно, увеличивая / умножая эти базовые значения.

Answer 1

Вы можете передать аргументы @content при условии, что контент определен как таковой с использованием ключевого слова using, для вашего примера это будет:

@mixin responsive {
    @media screen and (min-width: $breakpointXS) {
        @content(1);
    }
    @media screen and (min-width: $breakpointSM) {
        @content(1.2);
    }
    @media screen and (min-width: $breakpointMD) {
        @content(1.6);
    }
}

и использование станет

.myElement {
    @include responsive using ($multiplier) {
        height: 20px * $multiplier;
        width: 50px * $multiplier;
    }
}