在列表中分配列表项

Question

大家好，我正在尝试从列表中调用一个或两个元素。到目前为止，以下是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;
            }
          }
        }
      }
    }
  }

基本上，首先我创建了我的天气图标列表，然后我创建了一个天气条件列表，我想在这里引用图标列表中的图标。

然后我循环遍历这些条件，基本上尝试将天气条件设置为主类，然后检查是否为该列表项分配了一个或多个图标，如果有多个图标，请将第一个图标作为a:前面插入，然后将第二个图标作为a:a:后插入:如果只有一个图标，请将其作为前面的图标插入。

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

Answer 1

您应该使用Sass映射，这是SASS3.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)};
      }
    }
  }
}