如何执行';如果';嵌套sass映射(SCSS)中的语句?
由于我是sass(SCSS)的新手,我的抱负似乎已经超过了我的能力。有人能帮我完成以下任务吗如何执行';如果';嵌套sass映射(SCSS)中的语句?,css,if-statement,sass,each,Css,If Statement,Sass,Each,由于我是sass(SCSS)的新手,我的抱负似乎已经超过了我的能力。有人能帮我完成以下任务吗 背景 我们目前有一个图标系统,有两种不同的文件格式;一个是PNG,另一个是SVG。我们的一些图标有两种文件类型,一些有PNG或SVG。我希望能够单独列出它们 这是我的SCSS变量映射 $image-path: "http://www.mywebsite.com/assets/img/icons"; $icons-map: ( tick: ( filename: ic
背景 我们目前有一个图标系统,有两种不同的文件格式;一个是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是一个未定义的变量
谢谢您的帮助。您应该首先尝试使用
map get
获取地图中的值,因为返回值($file
在下面的解决方案中)是一个列表。这里有一个带有“变量”的简化类型,其中->
后表示返回该类型,后:
是您需要在此处输入的类型,显示您的变量将表示什么以及如何使用它们:
/* @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');
}
}
}
请记住,您正在搜索的是键
,而不是变量,唯一存在的变量是您定义的那些,这意味着具有png
和具有svg
不是变量,它们是地图中的键(在这种情况下,地图是$file
,地图中的键值$type
). 此外,由于您将它们定义为布尔值
,因此无法使用==“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");
}
这似乎是你想要的