如何在SCSS中获取数组的$ values? [英] How to get $values of Array in SCSS?

问题描述

我正在制作自己的插件，该插件通过在SCSS中编写单个@include行来自动进行多个媒体查询.

I'm making my own plugins that makes multiple media queries automatically by writing single @include line in SCSS.

因此，当我键入@include medias($bp-values, width);时，输出应如下所示:

So when I type @include medias($bp-values, width);, the output should be like this:

@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.";
        }
    }
}

我需要获取$breakpoints的$values并将其设置为@media查询宽度的前缀.

What I need is to get the $values of $breakpoints for setting it as prefixes of @media queries' width.

但是代码没有运行，我得到了:

But the code doesn't run, and I get this:

错误:未定义的变量:"$ num".

Error: Undefined variable: "$num".

大多数闲置解决方案是在单个@each指令中合并2个$ map，但是似乎SCSS不支持此操作.

Most idle solution would be to merge 2 $maps in single @each directive, but seems like SCSS doesn't support this.

有什么办法可以解决此问题?

Is there any ways to fix this problem?

推荐答案

在我看来，您不太了解地图和列表之间的区别.

In my opinion you did not understand very well the difference between maps and lists.

列表是值的array:

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

或

$breakpoints: 564, 768, 992, 1200;

或

$breakpoints: 564 768 992 1200;

因此，由于$breakpoints不是地图，因此此@return map-get($m, $v);总会给您带来错误.

So this @return map-get($m, $v); will get you always errors because $breakpoints is not a map.

地图具有键和值:

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

为帮助您进行项目，也许最好写一张嵌套地图:

To help you in your project, maybe it is better to write a map of nested maps:

$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来获取这些值:

It is more clear the correlation to every values. Now we can write a @mixin to get those values:

@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文件，

I posted your new sass file, much more understandable, I think

$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);

这篇关于如何在SCSS中获取数组的$ values?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！