如何在 SCSS 中获取数组的 $values？

Posted 2023-03-16

【中文标题】如何在 SCSS 中获取数组的 $values？

【英文标题】：How to get $values of Array in SCSS?

【发布时间】：2019-05-03 22:07:35

【问题描述】：

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

所以当我输入@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.";
        
    

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

但是代码没有运行，我明白了：

错误：未定义变量：“$num”。

最空闲的解决方案是将 2 个 $maps 合并到单个 @each 指令中，但似乎 SCSS 不支持这个。

有没有办法解决这个问题？

【参考方案1】：

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

列表是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);

【讨论】：

我向你致敬@ReSedano。大赞！并且一直感谢你。祝福你的灵魂：>

谢谢你的话，冷静波。在意大利这里是一个阴天，所以我有时间上网，如果我能提供帮助，我很高兴，因为我很理解当代码不能正常工作时你的感受。祝你的项目好运！ ;-)

感谢理解。在你帮助我之前，真的很难弄清楚。大部分日子是阴天在这里，韩国。 x|

@Brad，谢谢你。你真是太好了，非常感谢！ :-)

这就是为什么，你永远不应该使用 LESS。