Generated by SassMeister.com.

SassMeister-input.scss

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


/* Alias */
$active-tile-background-color:          #4C9CEA;
$inactive-tile-background-color:        #FFF;
$active-text-color:                     #FFF;
$inactive-text-color:                   #000;

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


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

SassMeister-output.css

/* Alias */
/* Lists */
.tile.tile--active {
  color: active-text-color;
  background-color: active-tile-background-color;
}
.tile.tile--active .tile__image {
  background-color: active-tile-background-color;
}
.tile.tile--active .tile__image.tile--business {
  background-image: url('/images/tile/business-active.svg');
}
.tile.tile--active .tile__image.tile--home {
  background-image: url('/images/tile/home-active.svg');
}
.tile.tile--inactive {
  color: inactive-text-color;
  background-color: inactive-tile-background-color;
}
.tile.tile--inactive .tile__image {
  background-color: inactive-tile-background-color;
}
.tile.tile--inactive .tile__image.tile--business {
  background-image: url('/images/tile/business-inactive.svg');
}
.tile.tile--inactive .tile__image.tile--home {
  background-image: url('/images/tile/home-inactive.svg');
}