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

%active-text-color {
   color: #FFF;
}
%active-bg-color { 
  background-color: #4C9CEA
}

%inactive-text-color {
  color: #000;
}
%inactive-bg-color {
  background-color: #FFF
}

.tile{
@each $state in $states{
    &.tile--#{$state}{
      @extend %#{$state}-text-color;
      @extend %#{$state}-bg-color;
      .tile__image{
        @extend %#{$state}-bg-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: #FFF;
}

.tile.tile--active, .tile.tile--active .tile__image {
  background-color: #4C9CEA;
}

.tile.tile--inactive {
  color: #000;
}

.tile.tile--inactive, .tile.tile--inactive .tile__image {
  background-color: #FFF;
}

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