Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (vundefined)
// Compass (vundefined)
// ----

$pfelements--gray:              #797979 !default;
$pfelements--gray-light:        #d2d2d2 !default;
$pfelements--gray-dark:         #333 !default;

$pfelements--orange:            #fe460d !default;
$pfelements--orange-dark:       #e23b0e !default;
$pfelements--orange-darkest:    #ad2b0c !default;

$pfelements--blue:              #0477a4 !default;
$pfelements--blue-dark:         #046a89 !default;
$pfelements--blue-darkest:      #044554 !default;

$pfelements--green:             #aee339 !default;
$pfelements--green-dark:        #a2c935 !default;
$pfelements--green-darkest:     #7c9328 !default;

$pfelements--gray:              #797979 !default;
$pfelements--gray-light:        #d2d2d2 !default;
$pfelements--gray-dark:         #333 !default;

// Other tertiary named colors to be used below
$pfelements--red:               #e00 !default; // Was #c00
$pfelements--yellow:            #f0ab00 !default;
$pfelements--cyan:              #007a87 !default;
$pfelements--purple:            rebeccapurple !default; // Was #703fec
// ========================================================================
// B&W, Gray Values
// ========================================================================

$pfe-color--white:               #fff !default;
$pfe-color--gray-50:             lighten($pfelements--gray, 48%) !default;
$pfe-color--gray-100:            lighten($pfelements--gray, 45%) !default;
$pfe-color--gray-200:            lighten($pfelements--gray, 40%) !default;
$pfe-color--gray-250:            $pfelements--gray-light !default;
$pfe-color--gray-300:            lighten($pfelements--gray, 30%) !default;
$pfe-color--gray-400:            lighten($pfelements--gray, 20%) !default;
$pfe-color--gray-500:            lighten($pfelements--gray, 10%) !default;
$pfe-color--gray-600:            $pfelements--gray !default;                 // Aliased
$pfe-color--gray-700:            darken($pfelements--gray, 10%) !default;
$pfe-color--gray-800:            darken($pfelements--gray, 20%) !default;
$pfe-color--gray-900:            darken($pfelements--gray, 30%) !default;
$pfe-color--gray-1000:           darken($pfelements--gray, 40%) !default;
$pfe-color--black:               $pfe-color--gray-1000 !default;               // Aliased

$pfe-color--cyan-50:             lighten($pfelements--cyan, 60%) !default;
$pfe-color--cyan-100:            lighten($pfelements--cyan, 50%) !default;
$pfe-color--cyan-200:            lighten($pfelements--cyan, 40%) !default;
$pfe-color--cyan-300:            lighten($pfelements--cyan, 30%) !default;
$pfe-color--cyan-400:            lighten($pfelements--cyan, 20%) !default;
$pfe-color--cyan-500:            lighten($pfelements--cyan, 10%) !default;
$pfe-color--cyan-600:            $pfelements--cyan !default;              // Aliased
$pfe-color--cyan-700:            darken($pfelements--cyan, 10%) !default;
$pfe-color--cyan-800:            darken($pfelements--cyan, 20%) !default;


$array (50, 100);

@mixin ($color: blue){
  @for each $number in $array {
    .pfe-color--#{$color}-#{$number} {
      color: $pfe-color--#{$color}-#{$number};
    }
  }
}

.pfe-color--white {
  color: $pfe-color--white;
}
.pfe-color--gray-50 {
  color: $pfe-color--gray-50;
}
.pfe-color--gray-100 {
  color: $pfe-color--gray-100;
}
.pfe-color--gray-200 {
  color: $pfe-color--gray-200;
}
.pfe-color--gray-250 {
  color: $pfe-color--gray-250;
}
.pfe-color--gray-300 {
  color: $pfe-color--gray-300;
}
.pfe-color--gray-400 {
  color: $pfe-color--gray-400;
}
.pfe-color--gray-500 {
  color: $pfe-color--gray-500;
}
.pfe-color--gray-600 {
  color: $pfe-color--gray-600;
}
.pfe-color--gray-700 {
  color: $pfe-color--gray-700;
}
.pfe-color--gray-800 {
  color: $pfe-color--gray-800;
}
.pfe-color--gray-900 {
  color: $pfe-color--gray-900;
}
.pfe-color--gray-1000 {
  color: $pfe-color--gray-1000;
}
.pfe-color--black {
  color: $pfe-color--black;
}


.pfe-color--blue-50 {
  color: $pfe-color--blue-50;
}
.pfe-color--blue-100 {
  color: $pfe-color--blue-100;
}
.pfe-color--blue-200 {
  color: $pfe-color--blue-200;
}
.pfe-color--blue-250 {
  color: $pfe-color--blue-250;
}
.pfe-color--blue-300 {
  color: $pfe-color--blue-300;
}
.pfe-color--blue-400 {
  color: $pfe-color--blue-400;
}
.pfe-color--blue-500 {
  color: $pfe-color--blue-500;
}
.pfe-color--blue-600 {
  color: $pfe-color--blue-600;
}
.pfe-color--blue-700 {
  color: $pfe-color--blue-700;
}
.pfe-color--blue-800 {
  color: $pfe-color--blue-800;
}
.pfe-color--blue-900 {
  color: $pfe-color--blue-900;
}
.pfe-color--blue-1000 {
  color: $pfe-color--blue-1000;
}

SassMeister-output.css

.pfe-color--white {
  color: #fff;
}

.pfe-color--gray-50 {
  color: #f3f3f3;
}

.pfe-color--gray-100 {
  color: #ececec;
}

.pfe-color--gray-200 {
  color: #dfdfdf;
}

.pfe-color--gray-250 {
  color: #d2d2d2;
}

.pfe-color--gray-300 {
  color: #c6c6c6;
}

.pfe-color--gray-400 {
  color: #acacac;
}

.pfe-color--gray-500 {
  color: #939393;
}

.pfe-color--gray-600 {
  color: #797979;
}

.pfe-color--gray-700 {
  color: #606060;
}

.pfe-color--gray-800 {
  color: #464646;
}

.pfe-color--gray-900 {
  color: #2d2d2d;
}

.pfe-color--gray-1000 {
  color: #131313;
}

.pfe-color--black {
  color: #131313;
}