Привет всем Я сейчас пытаюсь вызывать 1 или два элемента из списка в списке. Вот код sass:
$weather-icons:
(blizzard,"\e600", "#FFF"),
(cloudy_base,"\e601", "#FFF"),
(fog,"\e602", "#FFF"),
(heavy-rain_1,"\e603", "#6DC8BF"),
(heavy-snow,"\e604", "#FFF"),
(light-rain_1,"\e605", "#6DC8BF"),
(light-sleet,"\e606", "#FFF"),
(light-snow,"\e607", "#FFF"),
(overcast,"\e608", "#FFF"),
(partly_sun,"\e609", "#FDB913"),
(light-snow_thunder,"\e60a", "#FFF"),
(thunder_4,"\e60b", "#FDB913"),
(sun,"\e60c", "#FDB913"),
(thunder_1,"\e60d", "#FDB913"),
(heavy-rain_2,"\e60e", "#6DC8BF"),
(thunder_2,"\e60f", "#FDB913"),
(light-rain_2,"\e610", "#6DC8BF"),
(thunder_3,"\e611", "#FDB913");
$weather-conditions:
(sunny, $weather-icons(sun)),
(partly-cloudy, $weather-icons(blizzard, cloudy_base)),
(cloudy),
(overcast),
(thunder),
(heavy-rain),
(heavy-rain-thunder),
(light-rain),
(light-rain-thunder),
(sleet),
(light-snow),
(light-snow-thunder),
(heavy-snow),
(blizzard),
(fog);
@each $condition, $element in $weather-conditions {
.#{$condition} {
@each $item_element in $element {
@if(length($item_element) > 2){
content: length($item_element);
}@else{
&:before{
}
}
@each $element, $code, $color in $item_element {
@if(length($item_element) > 2){
&:before {
content: $code;
color: $color;
}
&:after {
content: $code;
color: $color;
}
}@else {
&:before {
content: $code;
color: $color;
}
}
}
}
}
}
В основном Прежде всего я создаю свой список значков погоды, затем создаю список погодных условий, в котором я хотел бы ссылаться на значки в списке значков.
Затем я просматриваю условия и в основном пытаюсь установить погодные условия в качестве основного класса, а затем проверить, присвоен ли один или несколько значков этому элементу списка, и если их больше одного, возьмите первый и вставьте его как: before, и вставьте второй как: после, если есть только один значок, вставьте его как раньше.
Я действительно теряюсь в своем собственном коде здесь, любая помощь была бы очень оценена.
Вы должны использовать карты Sass, представленные с Sass 3.3.
Вот как бы я это сделал:
$weather-icons: (
blizzard: ("\e600", "#FFF"),
cloudy_base: ("\e601", "#FFF"),
fog: ("\e602", "#FFF"),
heavy-rain_1: ("\e603", "#6DC8BF"),
heavy-snow: ("\e604", "#FFF"),
light-rain_1: ("\e605", "#6DC8BF"),
light-sleet: ("\e606", "#FFF"),
light-snow: ("\e607", "#FFF"),
overcast: ("\e608", "#FFF"),
partly_sun: ("\e609", "#FDB913"),
light-snow_thunder: ("\e60a", "#FFF"),
thunder_4: ("\e60b", "#FDB913"),
sun: ("\e60c", "#FDB913"),
thunder_1: ("\e60d", "#FDB913"),
heavy-rain_2: ("\e60e", "#6DC8BF"),
thunder_2: ("\e60f", "#FDB913"),
light-rain_2: ("\e610", "#6DC8BF"),
thunder_3: ("\e611", "#FDB913")
);
$weather-conditions: (
sunny: (sun),
partly-cloudy: (blizzard, cloudy_base)
);
@each $condition, $icons in $weather-conditions {
.#{$condition} {
$icon: map-get($weather-icons, nth($icons, 1));
&:before {
content: nth($icon, 1);
color: #{nth($icon, 2)};
}
@if length($icons) >= 2 {
$icon: map-get($weather-icons, nth($icons, 2));
&:after {
content: nth($icon, 1);
color: #{nth($icon, 2)};
}
}
}
}