Generated by SassMeister.com.

SassMeister-input.scss

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

// =============================================
// # Colors
// =============================================

// _settings.colors.scss

// Base
$_colorBaseGray: #3d3d3d !default;
$_colorBaseWhite: #fafafa !default;

// Colors
$_colorPrimary: #00a0df;

// Variants
$colorVariants: (
  gray: (
    base: $_colorBaseGray,
    light: lighten($_colorBaseGray, 10%),
    dark: darken($_colorBaseGray, 10%)
  ),
  white: (
    base: $_colorBaseWhite,
    light: lighten($_colorBaseWhite, 5%),
    dark: darken($_colorBaseWhite, 5%)
  ),
  primary: (
    base: $_colorPrimary,
    light: adjust-color($_colorPrimary,
      $saturation: 10%,
      $lightness: 10%
    ),
    dark: adjust-color($_colorPrimary,
      $saturation: 10%,
      $lightness: -10%
    )
  ),
  social: (
    facebook: #3b5998,
    google: #db4437,
    twitter: #55acee
  ),
);

// _tools.functions.scss

// Color getter
@function color($color, $tone: 'base') {
  @return map-get(map-get($colorVariants, $color), $tone);
}

// _overrides.colors.scss

@each $alias, $color in $colorVariants {
  
  // Create base color classes
  .color-#{$alias} {
    color: color($alias);
  }
  .bg-#{$alias} {
    background-color: color($alias);
  }
  
  // Loop through color maps
  @each $variant, $value in $color {
  
    // Use simplified classnames for social colors
    @if $alias == social {
      
      .color-#{$variant} {
        color: $value;
      }
      .bg-#{$variant} {
        background-color: $value;
      }
      
      // No need to recreate base color classes
    } @else if $variant != base  {
      
      .color-#{$alias}--#{$variant} {
        color: $value;
      }
      .bg-#{$alias}--#{$variant} {
        background-color: $value;
      }
      
    }
  }
}

SassMeister-output.css

.color-gray {
  color: #3d3d3d;
}

.bg-gray {
  background-color: #3d3d3d;
}

.color-gray--light {
  color: #575757;
}

.bg-gray--light {
  background-color: #575757;
}

.color-gray--dark {
  color: #242424;
}

.bg-gray--dark {
  background-color: #242424;
}

.color-white {
  color: #fafafa;
}

.bg-white {
  background-color: #fafafa;
}

.color-white--light {
  color: white;
}

.bg-white--light {
  background-color: white;
}

.color-white--dark {
  color: #ededed;
}

.bg-white--dark {
  background-color: #ededed;
}

.color-primary {
  color: #00a0df;
}

.bg-primary {
  background-color: #00a0df;
}

.color-primary--light {
  color: #13bcff;
}

.bg-primary--light {
  background-color: #13bcff;
}

.color-primary--dark {
  color: #007bac;
}

.bg-primary--dark {
  background-color: #007bac;
}

.color-facebook {
  color: #3b5998;
}

.bg-facebook {
  background-color: #3b5998;
}

.color-google {
  color: #db4437;
}

.bg-google {
  background-color: #db4437;
}

.color-twitter {
  color: #55acee;
}

.bg-twitter {
  background-color: #55acee;
}