List Sass在列表中分配列表项

大家好，我正在尝试调用列表中列表中的一两个元素。以下是迄今为止的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插入，如果只有一个图标，则将第二个图标作为：after插入作为before插入

我在这里真的迷失在我自己的代码中，任何帮助都将不胜感激。

您应该使用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)};
      }
    }
  }
}

---

有什么问题吗？你认为什么事情不会发生？你期待什么？