Sass Assign List Items in a List

Question

Hi everyone I am Currently trying to call 1 or two elements from a list in a list. Here is the sass code so far:

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

Basically First of all i am creating my weather icons list, then i am creating a weather conditions list where i would like to reference icons in the icons list.

Then I loop through the conditions and basically try and set the weather-conditions as the main class then to check if one or more icons have been assigned to that list item and if there is more then one, take the first and insert it as a :before, and insert the second as an :after if there is only one icon insert it as a before.

I am really getting lost in my own code here, Any Help Would Be Greatly Appreciated.

Answer 1

You should use Sass maps, introduced with Sass 3.3.

Here's how I would do :

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