Generated by SassMeister.com.

SassMeister-input-HTML.html

<!--
  - Styled directly.
  -->
<p class="u-color-world">Lorem ipsum dolor sit amet.</p>

<p class="u-color-politics">Lorem ipsum dolor sit amet.</p>

<p class="u-color-tech">Lorem ipsum dolor sit amet.</p>

<p class="u-color-entertainment">Lorem ipsum dolor sit amet.</p>

<p class="u-color-sport">Lorem ipsum dolor sit amet.</p>

<p class="u-color-weather">Lorem ipsum dolor sit amet.</p>

<hr />

<!--
  - Styled via ‘current’ pointer.
  -->
<div class="t-world">
  <p class="u-color-current">Lorem ipsum dolor sit amet.</p>
</div>

<div class="t-politics">
  <p class="u-color-current">Lorem ipsum dolor sit amet.</p>
</div>

<div class="t-tech">
  <p class="u-color-current">Lorem ipsum dolor sit amet.</p>
</div>

<div class="t-entertainment">
  <p class="u-color-current">Lorem ipsum dolor sit amet.</p>
</div>

<div class="t-sport">
  <p class="u-color-current">Lorem ipsum dolor sit amet.</p>
</div>

<div class="t-weather">
  <p class="u-color-current">Lorem ipsum dolor sit amet.</p>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.11)
// Compass (v1.0.3)
// ----

// Create a list of themes and their associated color.
// Here we have a made-up example of sections of a news site.
$themes: (
  world:          #ed1c24,
  politics:       #f7941d,
  tech:           #fff200,
  entertainment:  #00a651,
  sport:          #0054a6,
  weather:        #662d91,
);

// Create a list of different properties we might apply that color to.
$properties: (
  null,
  background-,
  border-,
);



@each $theme, $color in $themes {

  @each $property in $properties {

    // Create an absolute class which always points to the specified theme.
    // E.g. `.u-color-sport {}` is always #0054a6.
    .u-color-#{$property}#{$theme},
    // Create a variable-like class which always points to the ‘current’ color
    // based on the currently invoked theme.
    // E.g. `.u-color-current {}` will be the color of the current theme.
    .t-#{$theme} .u-color-#{$property}current {
      #{$property}color: $color;
    }

  }

}

SassMeister-output.css

.u-color-world,
.t-world .u-color-current {
  color: #ed1c24;
}

.u-color-background-world,
.t-world .u-color-background-current {
  background-color: #ed1c24;
}

.u-color-border-world,
.t-world .u-color-border-current {
  border-color: #ed1c24;
}

.u-color-politics,
.t-politics .u-color-current {
  color: #f7941d;
}

.u-color-background-politics,
.t-politics .u-color-background-current {
  background-color: #f7941d;
}

.u-color-border-politics,
.t-politics .u-color-border-current {
  border-color: #f7941d;
}

.u-color-tech,
.t-tech .u-color-current {
  color: #fff200;
}

.u-color-background-tech,
.t-tech .u-color-background-current {
  background-color: #fff200;
}

.u-color-border-tech,
.t-tech .u-color-border-current {
  border-color: #fff200;
}

.u-color-entertainment,
.t-entertainment .u-color-current {
  color: #00a651;
}

.u-color-background-entertainment,
.t-entertainment .u-color-background-current {
  background-color: #00a651;
}

.u-color-border-entertainment,
.t-entertainment .u-color-border-current {
  border-color: #00a651;
}

.u-color-sport,
.t-sport .u-color-current {
  color: #0054a6;
}

.u-color-background-sport,
.t-sport .u-color-background-current {
  background-color: #0054a6;
}

.u-color-border-sport,
.t-sport .u-color-border-current {
  border-color: #0054a6;
}

.u-color-weather,
.t-weather .u-color-current {
  color: #662d91;
}

.u-color-background-weather,
.t-weather .u-color-background-current {
  background-color: #662d91;
}

.u-color-border-weather,
.t-weather .u-color-border-current {
  border-color: #662d91;
}

SassMeister-rendered.html

<!--
  - Styled directly.
  -->
<p class="u-color-world">Lorem ipsum dolor sit amet.</p>

<p class="u-color-politics">Lorem ipsum dolor sit amet.</p>

<p class="u-color-tech">Lorem ipsum dolor sit amet.</p>

<p class="u-color-entertainment">Lorem ipsum dolor sit amet.</p>

<p class="u-color-sport">Lorem ipsum dolor sit amet.</p>

<p class="u-color-weather">Lorem ipsum dolor sit amet.</p>

<hr />

<!--
  - Styled via ‘current’ pointer.
  -->
<div class="t-world">
  <p class="u-color-current">Lorem ipsum dolor sit amet.</p>
</div>

<div class="t-politics">
  <p class="u-color-current">Lorem ipsum dolor sit amet.</p>
</div>

<div class="t-tech">
  <p class="u-color-current">Lorem ipsum dolor sit amet.</p>
</div>

<div class="t-entertainment">
  <p class="u-color-current">Lorem ipsum dolor sit amet.</p>
</div>

<div class="t-sport">
  <p class="u-color-current">Lorem ipsum dolor sit amet.</p>
</div>

<div class="t-weather">
  <p class="u-color-current">Lorem ipsum dolor sit amet.</p>
</div>