Как получить $ значения массива в SCSS? - PullRequest
Новая
       52

Как получить $ значения массива в SCSS?

0 голосов
/ 02 декабря 2018

Я создаю свои собственные плагины, которые автоматически выполняют несколько медиазапросов, записывая одну строку @include в SCSS.

Поэтому, когда я набираю @include medias($bp-values, width);, вывод должен выглядеть следующим образом: 

@media all and (min-width: 564px) {
    width: 200px;
}
@media all and (min-width: 768px) {
    width: 300px;
}
@media all and (min-width: 992px) {
    width: 400px;
}
@media all and (min-width: 1200px) {
    width: 500px;
}

И это код: 

$breakpoints: (
    564,
    768,
    992,
    1200
);

$bp-values: (
    width: (
        200px, 300px, 400px, 500px
    ),
    font-size: (
        20px, 30px, 40px, 50px
    )
);

@function gridnum($m, $v) {
    @return map-get($m, $v);
}

@mixin medias($map, $key) {
    $myList: map-get($map, $key);
    @each $value in $myList {
        $number: index($myList, $value);
        $grid: gridnum($breakpoints, $num);
        @if $value == $num {
            @media all and (min-width: $grid + px) {
                #{$key}: $value;
            }   
        } @else {
            @warn "There is an error to make @media queries.";
        }
    }
}

Мне нужно получить $values из $breakpoints для установки в качестве префиксов ширины @media запросов.

Но код не запускается, и я получаю это:

Ошибка: неопределенная переменная: "$ num".

Наиболее простое решение было быобъединить 2 $ maps в одну директиву @each, но кажется, что SCSS не поддерживает это.

Есть ли способы решить эту проблему?

1 Ответ

0 голосов
/ 02 декабря 2018

По-моему, вы не очень хорошо понимали разницу между картами и списками.

Список представляет собой array значений: 

$breakpoints: (
    564,
    768,
    992,
    1200
);

или 

$breakpoints: 564, 768, 992, 1200;

или 

$breakpoints: 564 768 992 1200;

Так что этот @return map-get($m, $v); всегда будет приводить к ошибкам, поскольку $breakpoints не является картой.

Карты имеют ключи и значения: 

 $breakpoints: (
        xs: 564,
        md: 768,
        lg: 992,
        xl: 1200
    );

Чтобы помочь вам в вашем проекте, может быть, лучше написать карту вложенных карт: 

$myMap:(
  xs:(
    min-width: 564px,
    width: 200px,
    font-size: 20px
  ),
  md:(
    min-width: 768px,
    width: 300px,
    font-size: 30px
  ),
  lg:(
    min-width: 992px,
    width: 400px,
    font-size: 40px
  ),
  xl:(
    min-width: 1200px,
    width: 500px,
    font-size: 50px
  )
);

Это более ясно, корреляция для каждого значения.Теперь мы можем написать @mixin, чтобы получить эти значения: 

@mixin medias($map, $key) {
  @each $keyMap, $valueMap in $map {
    @media all and (min-width: map-get($valueMap, min-width)) {
        #{$key}: map-get($valueMap, $key);
    }   
  }
}

И теперь мы можем включить его! 

@include medias($myMap, width);

Это результат, который вы просили: 

@media all and (min-width: 564px) {
  width: 200px;
}

@media all and (min-width: 768px) {
  width: 300px;
}

@media all and (min-width: 992px) {
  width: 400px;
}

@media all and (min-width: 1200px) {
  width: 500px;
}

Я разместил ваш новый файл SASS, я думаю, что он гораздо более понятен 

$myMap:(
  xs:(
    min-width: 564px,
    width: 200px,
    font-size: 20px
  ),
  md:(
    min-width: 768px,
    width: 300px,
    font-size: 20px
  ),
  lg:(
    min-width: 992px,
    width: 400px,
    font-size: 20px
  ),
  xl:(
    min-width: 1200px,
    width: 500px,
    font-size: 20px
  )
);

@mixin medias($map, $key) {
  @each $keyMap, $valueMap in $map {
    @media all and (min-width: map-get($valueMap, min-width)) {
        #{$key}: map-get($valueMap, $key);
    }   
  }
}

@include medias($myMap, width);
...