Sass在列表中分配列表項

Question

大家好我目前正在嘗試從列表中的列表調用1或2個元素。這是迄今爲止上海社會科學院代碼：

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

所有我創造我的天氣圖標列表基本上首先，然後我創建一個天氣狀況列表，我想引用圖標中的圖標列表。

然後我遍歷條件，基本上嘗試設置天氣條件作爲主要類，然後檢查是否有一個或多個圖標已分配給該列表項目，如果有多個圖標，則將第一個將它插入爲：之前，並將第二個插入爲：之後如果只有一個圖標將其插入爲之前。

我真的迷失在我自己的代碼裏，任何幫助都會被大大的讚賞。

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