Generated by SassMeister.com.

SassMeister-input-HTML.html

<p class="u-color-blue  u-color-red:hover">Foo</p>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

$colors: (
  'red': '#c00',
  'green': '#0c0',
  'blue': '#00c'
);

$variants: (
  null,
  'background-',
  'border-',
);

@each $alias, $color in $colors {

@each $variant in $variants {
  .u-color-#{$variant}#{$alias} {
    #{$variant}color: unquote($color);
  }
  
  .t-#{$alias} .u-color-#{$variant}current {
    #{$variant}color: unquote($color);
  }
}
 
}

.u-color-red\:hover:hover {
  color: red;
}

SassMeister-output.css

.u-color-red {
  color: #c00;
}

.t-red .u-color-current {
  color: #c00;
}

.u-color-background-red {
  background-color: #c00;
}

.t-red .u-color-background-current {
  background-color: #c00;
}

.u-color-border-red {
  border-color: #c00;
}

.t-red .u-color-border-current {
  border-color: #c00;
}

.u-color-green {
  color: #0c0;
}

.t-green .u-color-current {
  color: #0c0;
}

.u-color-background-green {
  background-color: #0c0;
}

.t-green .u-color-background-current {
  background-color: #0c0;
}

.u-color-border-green {
  border-color: #0c0;
}

.t-green .u-color-border-current {
  border-color: #0c0;
}

.u-color-blue {
  color: #00c;
}

.t-blue .u-color-current {
  color: #00c;
}

.u-color-background-blue {
  background-color: #00c;
}

.t-blue .u-color-background-current {
  background-color: #00c;
}

.u-color-border-blue {
  border-color: #00c;
}

.t-blue .u-color-border-current {
  border-color: #00c;
}

.u-color-red\:hover:hover {
  color: red;
}

SassMeister-rendered.html

<p class="u-color-blue  u-color-red:hover">Foo</p>