Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----

$themes-colors: (
  blue: (
    color1: #0176bb, 
    color2: #23aad0,
    color3: #edf7fd
  ),
  red: (
    color1: #e3413e, 
    color2: #1f518c,
    color3: #f8e042
  ),
  light-purple: (
    color1: #4a5269, 
    color2: #fc7d74,
    color3: #4a5269
  )
);

@each $theme-name, $colors in $themes-colors {
  $color1: map-get($colors, color1);
  $color2: map-get($colors, color2);
  $color3: map-get($colors, color3);

  .color-#{$theme-name} {
    body {
      background-color: $color2
    }

    .header,
    .title-intro {
      background-color: $color1
    }

    .title-intro:after {
      border-top-color: $color1
    }

    .submenu {
      background-color: $color3;
      a:hover {
        color: $color1;
      }
    }
  }
}

SassMeister-output.css

.color-blue body {
  background-color: #23aad0;
}
.color-blue .header,
.color-blue .title-intro {
  background-color: #0176bb;
}
.color-blue .title-intro:after {
  border-top-color: #0176bb;
}
.color-blue .submenu {
  background-color: #edf7fd;
}
.color-blue .submenu a:hover {
  color: #0176bb;
}

.color-red body {
  background-color: #1f518c;
}
.color-red .header,
.color-red .title-intro {
  background-color: #e3413e;
}
.color-red .title-intro:after {
  border-top-color: #e3413e;
}
.color-red .submenu {
  background-color: #f8e042;
}
.color-red .submenu a:hover {
  color: #e3413e;
}

.color-light-purple body {
  background-color: #fc7d74;
}
.color-light-purple .header,
.color-light-purple .title-intro {
  background-color: #4a5269;
}
.color-light-purple .title-intro:after {
  border-top-color: #4a5269;
}
.color-light-purple .submenu {
  background-color: #4a5269;
}
.color-light-purple .submenu a:hover {
  color: #4a5269;
}