Sass 在列表中分配列表项答案

【问题标题】：Sass Assign List Items in a ListSass 在列表中分配列表项
【发布时间】：2014-07-22 17:31:02
【问题描述】：

大家好，我目前正在尝试从列表中的列表中调用 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;
            }
          }
        }
      }
    }
  }

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

然后我遍历条件，基本上尝试将天气条件设置为主类，然后检查是否已将一个或多个图标分配给该列表项，如果有多个图标，则取第一个并插入它作为:before，如果只有一个图标，则将第二个作为:after插入。

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

【问题讨论】：

有什么问题？你认为这不会发生什么？你期待什么 CSS？

标签： list sass

【解决方案1】：

你应该使用Sass maps，在 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)};
      }
    }
  }
}

【讨论】：