Sass Назначить элементы списка в списке

Вопрос:

Привет всем Я сейчас пытаюсь вызывать 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)};
      }
    }
  }
}

Оцените статью
TechArks.Ru
Добавить комментарий