SASS/SCSS对象键值循环 [英] SASS/SCSS object key value loop
本文介绍了SASS/SCSS对象键值循环的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
看看这个例子:
@include font-face('Entypo', font-files('entypo.woff'));
.icon {
display: inline;
font: 400 40px/40px Entypo;
}
.icon-star {
@extend .icon;
&:after {
content: "\2605";
}
}
.icon-lightning {
@extend .icon;
&:after {
content: "\26A1";
}
}
我想使事情变得尽可能干燥,所以我想知道以下情况是否可行,怎么办?
I want to make things as DRY as possible so I want to know if the following is possible, and if so how?
@include font-face('Entypo', font-files('entypo.woff'));
.icon {
display: inline;
font: 400 40px/40px Entypo;
}
$icons {
$star: "\2605";
$lightning: "\26A1";
}
@each $icon in $icons {
$key = $icon{key}; // ???
$value = $icon{value}; // ???
.icon-#{$key} {
@extend .icon;
&:after {
content: $value;
}
}
}
推荐答案
Sass当前不支持映射.您现在必须使用列表列表.
Sass does not currently support mappings. You'll have to live with lists of lists for now.
$icons: star "\2605", lightning "\26A1";
@each $icon in $icons {
$key: nth($icon, 1);
$value: nth($icon, 2);
.icon-#{$key} {
@extend .icon;
&:after {
content: $value;
}
}
}
这篇关于SASS/SCSS对象键值循环的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文