Generated by SassMeister.com.

SassMeister-input-HTML.html

<a class="bgb :bgg05 tc2 :tcg60">Hi there little pilgrim</a>

SassMeister-input.scss

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

// Global Colors
// ------------------------------------------------------------------------------------ */
$white: #fff !default;
$black: #000 !default;
$beard-success-color: #4AB471 !default;
$beard-warning-color: #F3AE4E !default;
$beard-danger-color: #CF5C60 !default;

// Set Brand colors
//-------------------------------------------------------------------------- */
$brand-color-1: #3498DB !default;
$brand-color-2: darken($brand-color-1, 5%) !default;
$brand-color-3: darken($brand-color-2, 5%) !default;
$brand-color-4: darken($brand-color-3, 5%) !default;
$brand-color-5: darken($brand-color-4, 5%) !default;

$beard-colors: (
  b: $black,
  w: $white,
  1: $brand-color-1,
  2: $brand-color-2,
  3: $brand-color-3,
  4: $brand-color-4,
  5: $brand-color-5,
  success: $beard-success-color,
  warning: $beard-warning-color,
  danger: $beard-danger-color,
  g05: darken($white, 5%),
  g10: darken($white, 10%),
  g20: darken($white, 20%),
  g30: darken($white, 30%),
  g40: darken($white, 40%),
  g50: darken($white, 50%),
  g60: darken($white, 60%),
  g70: darken($white, 70%),
  g80: darken($white, 80%),
  g90: darken($white, 90%),
) !default;

// Define brand color variables
//-------------------------------------------------------------------------- */
// Background colors
$bgb: map-get($beard-colors, b);
$bgw: map-get($beard-colors, w);
$bg1: map-get($beard-colors, 1);
$bg2: map-get($beard-colors, 2);
$bg3: map-get($beard-colors, 3);
$bg4: map-get($beard-colors, 4);
$bg5: map-get($beard-colors, 5);

// Text colors
$tcb: map-get($beard-colors, b);
$tcw: map-get($beard-colors, w);
$tc1: map-get($beard-colors, 1);
$tc2: map-get($beard-colors, 2);
$tc3: map-get($beard-colors, 3);
$tc4: map-get($beard-colors, 4);
$tc5: map-get($beard-colors, 5);

// Border colors
$bcb: map-get($beard-colors, b);
$bcw: map-get($beard-colors, w);
$bc1: map-get($beard-colors, 1);
$bc2: map-get($beard-colors, 2);
$bc3: map-get($beard-colors, 3);
$bc4: map-get($beard-colors, 4);
$bc5: map-get($beard-colors, 5);

// Background Colors
// ------------------------------------------------------------------------------------ */
$bgg05: map-get($beard-colors, g05);
$bgg10: map-get($beard-colors, g10);
$bgg20: map-get($beard-colors, g20);
$bgg30: map-get($beard-colors, g30);
$bgg40: map-get($beard-colors, g40);
$bgg50: map-get($beard-colors, g50);
$bgg60: map-get($beard-colors, g60);
$bgg70: map-get($beard-colors, g70);
$bgg80: map-get($beard-colors, g80);
$bgg90: map-get($beard-colors, g90);

// Text Colors
// ------------------------------------------------------------------------------------ */
$tcg05: map-get($beard-colors, g05);
$tcg10: map-get($beard-colors, g10);
$tcg20: map-get($beard-colors, g20);
$tcg30: map-get($beard-colors, g30);
$tcg40: map-get($beard-colors, g40);
$tcg50: map-get($beard-colors, g50);
$tcg60: map-get($beard-colors, g60);
$tcg70: map-get($beard-colors, g70);
$tcg80: map-get($beard-colors, g80);
$tcg90: map-get($beard-colors, g90);

// Border Colors
// ------------------------------------------------------------------------------------ */
$bcg05: map-get($beard-colors, g05);
$bcg10: map-get($beard-colors, g10);
$bcg20: map-get($beard-colors, g20);
$bcg30: map-get($beard-colors, g30);
$bcg40: map-get($beard-colors, g40);
$bcg50: map-get($beard-colors, g50);
$bcg60: map-get($beard-colors, g60);
$bcg70: map-get($beard-colors, g70);
$bcg80: map-get($beard-colors, g80);
$bcg90: map-get($beard-colors, g90);

// Generate Helpers for each color
@each $id, $color in $beard-colors {
    .bg#{$id} { background-color: $color !important; }
    .tc#{$id} { color: $color !important; }
    .bc#{$id} { border-color: $color !important; }
}

@each $id, $color in $beard-colors {
    .\:bg#{$id}:hover { background-color: $color !important; }
    .\:tc#{$id}:hover { color: $color !important; }
    .\:bc#{$id}:hover { border-color: $color !important; }
}

SassMeister-output.css

.bgb { background-color: #000 !important; }

.tcb { color: #000 !important; }

.bcb { border-color: #000 !important; }

.bgw { background-color: #fff !important; }

.tcw { color: #fff !important; }

.bcw { border-color: #fff !important; }

.bg1 { background-color: #3498DB !important; }

.tc1 { color: #3498DB !important; }

.bc1 { border-color: #3498DB !important; }

.bg2 { background-color: #258cd1 !important; }

.tc2 { color: #258cd1 !important; }

.bc2 { border-color: #258cd1 !important; }

.bg3 { background-color: #217dbb !important; }

.tc3 { color: #217dbb !important; }

.bc3 { border-color: #217dbb !important; }

.bg4 { background-color: #1d6fa5 !important; }

.tc4 { color: #1d6fa5 !important; }

.bc4 { border-color: #1d6fa5 !important; }

.bg5 { background-color: #196090 !important; }

.tc5 { color: #196090 !important; }

.bc5 { border-color: #196090 !important; }

.bgsuccess { background-color: #4AB471 !important; }

.tcsuccess { color: #4AB471 !important; }

.bcsuccess { border-color: #4AB471 !important; }

.bgwarning { background-color: #F3AE4E !important; }

.tcwarning { color: #F3AE4E !important; }

.bcwarning { border-color: #F3AE4E !important; }

.bgdanger { background-color: #CF5C60 !important; }

.tcdanger { color: #CF5C60 !important; }

.bcdanger { border-color: #CF5C60 !important; }

.bgg05 { background-color: #f2f2f2 !important; }

.tcg05 { color: #f2f2f2 !important; }

.bcg05 { border-color: #f2f2f2 !important; }

.bgg10 { background-color: #e6e6e6 !important; }

.tcg10 { color: #e6e6e6 !important; }

.bcg10 { border-color: #e6e6e6 !important; }

.bgg20 { background-color: #cccccc !important; }

.tcg20 { color: #cccccc !important; }

.bcg20 { border-color: #cccccc !important; }

.bgg30 { background-color: #b3b3b3 !important; }

.tcg30 { color: #b3b3b3 !important; }

.bcg30 { border-color: #b3b3b3 !important; }

.bgg40 { background-color: #999999 !important; }

.tcg40 { color: #999999 !important; }

.bcg40 { border-color: #999999 !important; }

.bgg50 { background-color: gray !important; }

.tcg50 { color: gray !important; }

.bcg50 { border-color: gray !important; }

.bgg60 { background-color: #666666 !important; }

.tcg60 { color: #666666 !important; }

.bcg60 { border-color: #666666 !important; }

.bgg70 { background-color: #4d4d4d !important; }

.tcg70 { color: #4d4d4d !important; }

.bcg70 { border-color: #4d4d4d !important; }

.bgg80 { background-color: #333333 !important; }

.tcg80 { color: #333333 !important; }

.bcg80 { border-color: #333333 !important; }

.bgg90 { background-color: #1a1a1a !important; }

.tcg90 { color: #1a1a1a !important; }

.bcg90 { border-color: #1a1a1a !important; }

.\:bgb:hover { background-color: #000 !important; }

.\:tcb:hover { color: #000 !important; }

.\:bcb:hover { border-color: #000 !important; }

.\:bgw:hover { background-color: #fff !important; }

.\:tcw:hover { color: #fff !important; }

.\:bcw:hover { border-color: #fff !important; }

.\:bg1:hover { background-color: #3498DB !important; }

.\:tc1:hover { color: #3498DB !important; }

.\:bc1:hover { border-color: #3498DB !important; }

.\:bg2:hover { background-color: #258cd1 !important; }

.\:tc2:hover { color: #258cd1 !important; }

.\:bc2:hover { border-color: #258cd1 !important; }

.\:bg3:hover { background-color: #217dbb !important; }

.\:tc3:hover { color: #217dbb !important; }

.\:bc3:hover { border-color: #217dbb !important; }

.\:bg4:hover { background-color: #1d6fa5 !important; }

.\:tc4:hover { color: #1d6fa5 !important; }

.\:bc4:hover { border-color: #1d6fa5 !important; }

.\:bg5:hover { background-color: #196090 !important; }

.\:tc5:hover { color: #196090 !important; }

.\:bc5:hover { border-color: #196090 !important; }

.\:bgsuccess:hover { background-color: #4AB471 !important; }

.\:tcsuccess:hover { color: #4AB471 !important; }

.\:bcsuccess:hover { border-color: #4AB471 !important; }

.\:bgwarning:hover { background-color: #F3AE4E !important; }

.\:tcwarning:hover { color: #F3AE4E !important; }

.\:bcwarning:hover { border-color: #F3AE4E !important; }

.\:bgdanger:hover { background-color: #CF5C60 !important; }

.\:tcdanger:hover { color: #CF5C60 !important; }

.\:bcdanger:hover { border-color: #CF5C60 !important; }

.\:bgg05:hover { background-color: #f2f2f2 !important; }

.\:tcg05:hover { color: #f2f2f2 !important; }

.\:bcg05:hover { border-color: #f2f2f2 !important; }

.\:bgg10:hover { background-color: #e6e6e6 !important; }

.\:tcg10:hover { color: #e6e6e6 !important; }

.\:bcg10:hover { border-color: #e6e6e6 !important; }

.\:bgg20:hover { background-color: #cccccc !important; }

.\:tcg20:hover { color: #cccccc !important; }

.\:bcg20:hover { border-color: #cccccc !important; }

.\:bgg30:hover { background-color: #b3b3b3 !important; }

.\:tcg30:hover { color: #b3b3b3 !important; }

.\:bcg30:hover { border-color: #b3b3b3 !important; }

.\:bgg40:hover { background-color: #999999 !important; }

.\:tcg40:hover { color: #999999 !important; }

.\:bcg40:hover { border-color: #999999 !important; }

.\:bgg50:hover { background-color: gray !important; }

.\:tcg50:hover { color: gray !important; }

.\:bcg50:hover { border-color: gray !important; }

.\:bgg60:hover { background-color: #666666 !important; }

.\:tcg60:hover { color: #666666 !important; }

.\:bcg60:hover { border-color: #666666 !important; }

.\:bgg70:hover { background-color: #4d4d4d !important; }

.\:tcg70:hover { color: #4d4d4d !important; }

.\:bcg70:hover { border-color: #4d4d4d !important; }

.\:bgg80:hover { background-color: #333333 !important; }

.\:tcg80:hover { color: #333333 !important; }

.\:bcg80:hover { border-color: #333333 !important; }

.\:bgg90:hover { background-color: #1a1a1a !important; }

.\:tcg90:hover { color: #1a1a1a !important; }

.\:bcg90:hover { border-color: #1a1a1a !important; }

SassMeister-rendered.html

<a class="bgb :bgg05 tc2 :tcg60">Hi there little pilgrim</a>