SassMeister-input.scss

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----


/* Alias */
$config__tile: (
  "active": (
    "background-color": #4C9CEA,
    "text-color": #FFF
  ),

  "inactive": (
    "background-color": #FFF,
    "text-color": #000
  )
);

/* Lists */
$states: active inactive;
$tile-types: business home;

.tile {
  @each $state in $states {
    &.tile--#{$state} {
      color: map-get(map-get($config__tile, $state), "text-color");
      background-color: map-get(map-get($config__tile, $state), "background-color");

      .tile__image {
        background-color: map-get(map-get($config__tile, $state), "background-color");

        @each $tile-type in $tile-types {
          &.tile--#{$tile-type} {
            background-image: image-url("tile/#{$tile-type}-#{$state}.svg")
          }
        }
      }
    }
  }
}