Используйте результат функции sass в функции - PullRequest
Новая
       13

Используйте результат функции sass в функции

0 голосов
/ 23 марта 2020

У меня есть несколько точек останова и миксин для их обработки: 

$breakpoints: (
    'xs': (max-width: 768px),
    'sm': (min-width: 768px),
    'md': (min-width: 992px),
    'lg': (mix-width: 1200px),
) !default;

@mixin screen($breakpoint) {
    @if map-has-key($breakpoints, $breakpoint) {
        @media #{inspect(map-get($breakpoints, $breakpoint))} {
           @content;
         }
     } @else {
        @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Available breakpoints are: #{map-keys($breakpoints)}.";
    }
}

Теперь мне нравится то, что значения пикселей будут go через em() функцию.

Эта функция выглядит следующим образом: 

@function em($pixels, $context: $font-initial-size) {
   @return #{$pixels/$context}em;
}

Теперь я хотел бы, чтобы это выглядело так: 

 $breakpoints: (
    'xs': (max-width: em(768px)),
    'sm': (min-width: em(768px)),
    'md': (min-width: em(992px)),
    'lg': (mix-width: em(1200px)),
) !default;

Но тогда вывод CSS будет таким: 

@media (min-width: em(768px)) {

... и должно быть: 

@media (min-width: 48em) {

Так как же вернуть результат функции sass в функцию sass?

Я попытался добавить #{} до точки останова $ ... но это не сработало.

...