Generated by SassMeister.com.

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;


  @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 {
        @each $tile-type in $tile-types {
          &.tile--#{$tile-type} {
            background-image: image-url("tile/#{$tile-type}-#{$state}.svg")
          }
        }
      }
    }
  }

SassMeister-output.css

.tile--active {
  color: #FFF;
  background-color: #4C9CEA;
}
.tile--active .tile__image.tile--business {
  background-image: url('/images/tile/business-active.svg');
}
.tile--active .tile__image.tile--home {
  background-image: url('/images/tile/home-active.svg');
}

.tile--inactive {
  color: #000;
  background-color: #FFF;
}
.tile--inactive .tile__image.tile--business {
  background-image: url('/images/tile/business-inactive.svg');
}
.tile--inactive .tile__image.tile--home {
  background-image: url('/images/tile/home-inactive.svg');
}