Цикл значения объекта объекта 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";
}
}
Я хочу сделать все как можно сухим, поэтому я хочу знать, возможно ли следующее, и если да, то как?
@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;
}
}
}
Ответы
Ответ 1
В настоящее время Sass не поддерживает сопоставления. Теперь вам придется жить со списками списков.
$icons: star "\2605", lightning "\26A1";
@each $icon in $icons {
$key: nth($icon, 1);
$value: nth($icon, 2);
.icon-#{$key} {
@extend .icon;
&:after {
content: $value;
}
}
}
Ответ 2
Sass 3.3 (выпущен на 2014/03/07) теперь позволяет использовать карты:
@include font-face('Entypo', font-files('entypo.woff'));
.icon {
display: inline;
font: 400 40px/40px Entypo;
}
$icons: (
star: "\2605",
lightning: "\26A1"
);
@each $key, $value in $icons {
.icon-#{$key} {
@extend .icon;
&:after {
content: $value;
}
}
}