如何在嵌套的 sass 映射 (SCSS) 中执行 'if' 语句？

Question

由于我是 sass (SCSS) 的新手，看来我的野心目前超过了我的能力。有人可以帮我完成以下任务吗？

背景

我们目前有一个具有两种不同文件格式的图标系统；一个是 PNG，另一个是 SVG。我们的一些图标有两种文件类型，有些有 PNG 或 SVG。我希望能够单独列出它们。

这是我的 SCSS 变量映射。

$image-path: "http://www.mywebsite.com/assets/img/icons";
$icons-map: (
    tick: (
        filename:       icons_tick,
        has-png:            true,
        has-svg:            false,
    ),          
    secure: (
        filename:       icons_secure,
        has-png:            true,
        has-svg:            true,
    ),
    checkout: (
        filename:       icons_checkout,
        has-png:            false,
        has-svg:            true,
    ),
);

以及我如何尝试列出它们...

/* Standard (PNG) Icons */
@each $icon-type, $icon-file in $icons-map {
    @if $has-png == "true" { 
        .icon-#{$icon-type}:after {
            background-image: url('#{$image-path}/png/#{$filename}.png');
        }
    }
}

/* Advanced SVG icons (progressive enhancement for newer mobiles, retina-style displays, etc) */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
    @each $icon-type, $icon-file in $icons-map {
        @if $has-svg == "true" { 
            .icon.#{$icon-type}:after {
                background-image: url('#{$image-path}/svg/#{$filename}.svg');
            }
        }
    }
}

唯一的问题是它似乎没有计划...我有什么地方不对吗？我假设这是我循环遍历嵌套地图的方式，或者我设置 'if' 语句的方式。

我希望输出是这样的；

/* Standard (PNG) Icons */
.icon.tick {
      background-image: url('http://www.mywebsite.com/assets/img/icons/png/icons_tick.png');
    }
    .icon.secure {
      background-image: url('http://www.mywebsite.com/assets/img/icons/png/icons_secure.png');
    }
/* Advanced SVG icons (progressive enhancement for newer mobiles, retina-style displays, etc) */
    @media only screen and (-webkit-min-device-pixel-ratio: 2),
        only screen and (     -o-min-device-pixel-ratio: 2/1),
        only screen and (        min-device-pixel-ratio: 2),
        only screen and (                min-resolution: 192dpi),
        only screen and (                min-resolution: 2dppx) {
    .icon.secure {
      background-image: url('http://www.mywebsite.com/assets/img/icons/svg/icons_secure.svg');
    }
    .icon.checkout {
      background-image: url('http://www.mywebsite.com/assets/img/icons/svg/icons_checkout.svg');
    }

}

不断收到 $has-png 和 $has-svg 是未定义变量的错误。

感谢您的帮助。

Answer 1

您应该首先尝试使用 map-get 获取地图中的值，因为返回值（我下面的解决方案中的 $file）是一个列表。这是一个带有 'variables' 的简化版本，在 -> 之后表示 returns 类型，在 : 之后是您需要在此处输入的类型，向您展示您的类型变量将代表以及你如何使用它们：

/* @each $type->string, $file->map in $icons-map:map */
@each $type, $file in $icons-map {
    /* if get-value-with-keyname-in-map($file:map, has-png:string)->boolean; is true */
    @if map-get($file, has-png) == true { 
        .icon-#{$type}:after {
            /* print get-value-with-keyname-in-map($file:map, filename:string)->string; */
            background-image: url('#{$image-path}/png/#{map-get($file, filename)}.png');
        }
    } 
}

记住你正在寻找 keys 而不是变量，唯一存在的变量是你定义的变量，这意味着 has-png 和 has-svg 不是变量，它们是映射（在这种情况下，映射是 $file，映射 $icons-map 中键 $type 的值。此外，由于您将它们定义为 booleans 您实际上无法使用 == "true" 进行比较，因为这意味着一个字符串，因此只需检查它们是否为 == true.

我从中得到的输出是：

.icon-tick:after {
    background-image: url("http://www.mywebsite.com/assets/img/icons/png/icons_tick.png");
}
.icon-secure:after {
    background-image: url("http://www.mywebsite.com/assets/img/icons/png/icons_secure.png");
}

这似乎是你想要的。

如何在嵌套的 sass 映射 (SCSS) 中执行 'if' 语句？

How do I perform an 'if' statement within a nested sass map (SCSS)?

css

each

if-statement

sass

背景