Generated by SassMeister.com.

SassMeister-input.scss

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

@mixin backgrounds($palette) {
  @each $color-class, $color in $palette {
    .mck-th-bg-#{$color-class},
    .mck-th-bg-#{$color-class}--hover:hover,
    .mck-th-bg-#{$color-class}--after *:after{
      background-color: $color !important;
      border-color: transparent !important;
      //color: $white !important;
    }
  }
}

$using-the-dls: #2166b1;
$design-principles: #4356a5;
$grid-page-structure-layout: #1ea9e1;
$colors: #7e9aaa;
$typography: #059ba7;
$iconography: #136a84;
$imagery: #67307e;
$buttons-links-tooltips: #67307e;
$content-feeds: #4356a5;
$content-detail: #2166b1;
$media-players: #1ea9e1;
$form-layout: #7e9aaa;
$form-fields: #059ba7;
$form-validation: #136a84;
$data-tables: #67307e;
$data-visualizations: #4356a5;
$masthead-footer: #4356a5;
$navigation: #2166b1;
$notifications-alerts: #1ea9e1;
$search-results: #7e9aaa;
$modals: #059ba7;
$log-in: #136a84;
$landing-page: #2166b1;
$article-pages: #1ea9e1;
$profile-page: #7e9aaa;
$product-page: #059ba7;
$search-and-results: #136a84;
$form-pages: #67307e;
$links-page: #4356a5;
$visualizations-tables: #2166b1;

$palette-portal: (
  using-the-dls:              $using-the-dls,
  design-principles:          $design-principles,
  grid-page-structure-layout: $grid-page-structure-layout,
  colors:                     $colors,
  typography:                 $typography,
  iconography:                $iconography,
  imagery:                    $imagery,
  buttons-links-tooltips:     $buttons-links-tooltips,
  content-feeds:              $content-feeds,
  content-detail:             $content-detail,
  media-players:              $media-players,
  form-layout:                $form-layout,
  form-fields:                $form-fields,
  form-validation:            $form-validation,
  data-tables:                $data-tables,
  data-visualizations:        $data-visualizations,
  masthead-footer:            $masthead-footer,
  navigation:                 $navigation,
  notifications-alerts:       $notifications-alerts,
  search-results:             $search-results,
  modals:                     $modals,
  log-in:                     $log-in,
  landing-page:               $landing-page,
  article-pages:              $article-pages,
  profile-page:               $profile-page,
  product-page:               $product-page,
  search-and:                 $search-and-results,
  form-pages:                 $form-pages,
  links-page:                 $links-page,
  visualizations-tables:      $visualizations-tables
);

@include backgrounds($palette-portal);

SassMeister-output.css

.mck-th-bg-using-the-dls,
.mck-th-bg-using-the-dls--hover:hover,
.mck-th-bg-using-the-dls--after *:after {
  background-color: #2166b1 !important;
  border-color: transparent !important;
}

.mck-th-bg-design-principles,
.mck-th-bg-design-principles--hover:hover,
.mck-th-bg-design-principles--after *:after {
  background-color: #4356a5 !important;
  border-color: transparent !important;
}

.mck-th-bg-grid-page-structure-layout,
.mck-th-bg-grid-page-structure-layout--hover:hover,
.mck-th-bg-grid-page-structure-layout--after *:after {
  background-color: #1ea9e1 !important;
  border-color: transparent !important;
}

.mck-th-bg-colors,
.mck-th-bg-colors--hover:hover,
.mck-th-bg-colors--after *:after {
  background-color: #7e9aaa !important;
  border-color: transparent !important;
}

.mck-th-bg-typography,
.mck-th-bg-typography--hover:hover,
.mck-th-bg-typography--after *:after {
  background-color: #059ba7 !important;
  border-color: transparent !important;
}

.mck-th-bg-iconography,
.mck-th-bg-iconography--hover:hover,
.mck-th-bg-iconography--after *:after {
  background-color: #136a84 !important;
  border-color: transparent !important;
}

.mck-th-bg-imagery,
.mck-th-bg-imagery--hover:hover,
.mck-th-bg-imagery--after *:after {
  background-color: #67307e !important;
  border-color: transparent !important;
}

.mck-th-bg-buttons-links-tooltips,
.mck-th-bg-buttons-links-tooltips--hover:hover,
.mck-th-bg-buttons-links-tooltips--after *:after {
  background-color: #67307e !important;
  border-color: transparent !important;
}

.mck-th-bg-content-feeds,
.mck-th-bg-content-feeds--hover:hover,
.mck-th-bg-content-feeds--after *:after {
  background-color: #4356a5 !important;
  border-color: transparent !important;
}

.mck-th-bg-content-detail,
.mck-th-bg-content-detail--hover:hover,
.mck-th-bg-content-detail--after *:after {
  background-color: #2166b1 !important;
  border-color: transparent !important;
}

.mck-th-bg-media-players,
.mck-th-bg-media-players--hover:hover,
.mck-th-bg-media-players--after *:after {
  background-color: #1ea9e1 !important;
  border-color: transparent !important;
}

.mck-th-bg-form-layout,
.mck-th-bg-form-layout--hover:hover,
.mck-th-bg-form-layout--after *:after {
  background-color: #7e9aaa !important;
  border-color: transparent !important;
}

.mck-th-bg-form-fields,
.mck-th-bg-form-fields--hover:hover,
.mck-th-bg-form-fields--after *:after {
  background-color: #059ba7 !important;
  border-color: transparent !important;
}

.mck-th-bg-form-validation,
.mck-th-bg-form-validation--hover:hover,
.mck-th-bg-form-validation--after *:after {
  background-color: #136a84 !important;
  border-color: transparent !important;
}

.mck-th-bg-data-tables,
.mck-th-bg-data-tables--hover:hover,
.mck-th-bg-data-tables--after *:after {
  background-color: #67307e !important;
  border-color: transparent !important;
}

.mck-th-bg-data-visualizations,
.mck-th-bg-data-visualizations--hover:hover,
.mck-th-bg-data-visualizations--after *:after {
  background-color: #4356a5 !important;
  border-color: transparent !important;
}

.mck-th-bg-masthead-footer,
.mck-th-bg-masthead-footer--hover:hover,
.mck-th-bg-masthead-footer--after *:after {
  background-color: #4356a5 !important;
  border-color: transparent !important;
}

.mck-th-bg-navigation,
.mck-th-bg-navigation--hover:hover,
.mck-th-bg-navigation--after *:after {
  background-color: #2166b1 !important;
  border-color: transparent !important;
}

.mck-th-bg-notifications-alerts,
.mck-th-bg-notifications-alerts--hover:hover,
.mck-th-bg-notifications-alerts--after *:after {
  background-color: #1ea9e1 !important;
  border-color: transparent !important;
}

.mck-th-bg-search-results,
.mck-th-bg-search-results--hover:hover,
.mck-th-bg-search-results--after *:after {
  background-color: #7e9aaa !important;
  border-color: transparent !important;
}

.mck-th-bg-modals,
.mck-th-bg-modals--hover:hover,
.mck-th-bg-modals--after *:after {
  background-color: #059ba7 !important;
  border-color: transparent !important;
}

.mck-th-bg-log-in,
.mck-th-bg-log-in--hover:hover,
.mck-th-bg-log-in--after *:after {
  background-color: #136a84 !important;
  border-color: transparent !important;
}

.mck-th-bg-landing-page,
.mck-th-bg-landing-page--hover:hover,
.mck-th-bg-landing-page--after *:after {
  background-color: #2166b1 !important;
  border-color: transparent !important;
}

.mck-th-bg-article-pages,
.mck-th-bg-article-pages--hover:hover,
.mck-th-bg-article-pages--after *:after {
  background-color: #1ea9e1 !important;
  border-color: transparent !important;
}

.mck-th-bg-profile-page,
.mck-th-bg-profile-page--hover:hover,
.mck-th-bg-profile-page--after *:after {
  background-color: #7e9aaa !important;
  border-color: transparent !important;
}

.mck-th-bg-product-page,
.mck-th-bg-product-page--hover:hover,
.mck-th-bg-product-page--after *:after {
  background-color: #059ba7 !important;
  border-color: transparent !important;
}

.mck-th-bg-search-and,
.mck-th-bg-search-and--hover:hover,
.mck-th-bg-search-and--after *:after {
  background-color: #136a84 !important;
  border-color: transparent !important;
}

.mck-th-bg-form-pages,
.mck-th-bg-form-pages--hover:hover,
.mck-th-bg-form-pages--after *:after {
  background-color: #67307e !important;
  border-color: transparent !important;
}

.mck-th-bg-links-page,
.mck-th-bg-links-page--hover:hover,
.mck-th-bg-links-page--after *:after {
  background-color: #4356a5 !important;
  border-color: transparent !important;
}

.mck-th-bg-visualizations-tables,
.mck-th-bg-visualizations-tables--hover:hover,
.mck-th-bg-visualizations-tables--after *:after {
  background-color: #2166b1 !important;
  border-color: transparent !important;
}