Question

大家好我正在尝试从列表中的列表中调用1或2个元素。到目前为止，这是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：之前，并将第二个插入为：之后如果只有一个图标将其插入之前。

我真的迷失在我自己的代码中，任何帮助都会受到极大的赞赏。

Answer 1

你应该使用Sass 3.3引入的Sass maps。

以下是我的行为：

$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)};
      }
    }
  }
}

Sass在列表中分配列表项

1 个答案: