Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----

/**
 ********************************
 * _COLORS.SCSS
 ********************************
 */

/**
 * This helper makes it easy to add and access custom colors.
 *
 * How to add a color:
  @include addColor(carpages, #090);
 *
 * How to access a color:
  .foo {
    color: get($color, carpages)
  }
 */
$color: ();
@mixin addColor($name, $value, $helper: false) {
  // Add color to $color map
   $color: map-merge($color, ($name: $value)) !global;

  // Add helper to CSS
  @if $helper == true {
    .c--#{$name} {
      color: $value;
    }
  }
}

$use-colors: true;

$color-settings: () !default;

$g-color: map-merge((
  grey-interval: 5
), $color-settings);


/**
 * @module Social Colors
 * @description Easy references to common social colors. These are variables
 * that can be handy to use for text colors (esp icons) or backgrounds.
 *
 * @markup
  .share--facebook { color: get($color, facebook); }
 */
@include addColor(facebook,    #3A5998, $use-colors);
@include addColor(twitter,     #1AB2E8, $use-colors);
@include addColor(google,      #4386F7, $use-colors);
@include addColor(google-plus, #DD4C39, $use-colors);
@include addColor(pinterest,   #C9232D, $use-colors);


/**
 * @module Grey Colors
 * @description Easy reference to the color scale. The scale goes from 0 - 100
 * by intervals of 5, where 0 is black, and 100 is white.
 *
 * @markup
  .foo { color: get($color, g20); }
 */
@for $i from 0 through 100 / map-get($g-color, grey-interval) {
  $grey-percent: $i * map-get($g-color, grey-interval);

  @include addColor(g + $grey-percent, lighten(#000, $grey-percent), $use-colors)
}

SassMeister-output.css

/**
 ********************************
 * _COLORS.SCSS
 ********************************
 */
/**
 * This helper makes it easy to add and access custom colors.
 *
 * How to add a color:
  @include addColor(carpages, #090);
 *
 * How to access a color:
  .foo {
    color: get($color, carpages)
  }
 */
/**
 * @module Social Colors
 * @description Easy references to common social colors. These are variables
 * that can be handy to use for text colors (esp icons) or backgrounds.
 *
 * @markup
  .share--facebook { color: get($color, facebook); }
 */
.c--facebook {
  color: #3A5998;
}

.c--twitter {
  color: #1AB2E8;
}

.c--google {
  color: #4386F7;
}

.c--google-plus {
  color: #DD4C39;
}

.c--pinterest {
  color: #C9232D;
}

/**
 * @module Grey Colors
 * @description Easy reference to the color scale. The scale goes from 0 - 100
 * by intervals of 5, where 0 is black, and 100 is white.
 *
 * @markup
  .foo { color: get($color, g20); }
 */
.c--g0 {
  color: black;
}

.c--g5 {
  color: #0d0d0d;
}

.c--g10 {
  color: #1a1a1a;
}

.c--g15 {
  color: #262626;
}

.c--g20 {
  color: #333333;
}

.c--g25 {
  color: #404040;
}

.c--g30 {
  color: #4d4d4d;
}

.c--g35 {
  color: #595959;
}

.c--g40 {
  color: #666666;
}

.c--g45 {
  color: #737373;
}

.c--g50 {
  color: gray;
}

.c--g55 {
  color: #8c8c8c;
}

.c--g60 {
  color: #999999;
}

.c--g65 {
  color: #a6a6a6;
}

.c--g70 {
  color: #b3b3b3;
}

.c--g75 {
  color: #bfbfbf;
}

.c--g80 {
  color: #cccccc;
}

.c--g85 {
  color: #d9d9d9;
}

.c--g90 {
  color: #e6e6e6;
}

.c--g95 {
  color: #f2f2f2;
}

.c--g100 {
  color: white;
}