Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="pf-color-black-100    swatch ">pf-color-black-100    </div>
<div class="pf-color-black-150    swatch ">pf-color-black-150    </div>
<div class="pf-color-black-200    swatch ">pf-color-black-200    </div>
<div class="pf-color-black-300    swatch ">pf-color-black-300    </div>
<div class="pf-color-black-400    swatch ">pf-color-black-400    </div>
<div class="pf-color-black-500    swatch ">pf-color-black-500    </div>

<div class="pf-color-black-600    swatch ">pf-color-black-600    </div>

<div class="pf-color-black-600-alt swatch ">pf-color-black-600-alt</div>
<br/>
<div class="pf-color-black-700    swatch ">pf-color-black-700    </div>
<div class="pf-color-black-800    swatch ">pf-color-black-800    </div>
<div class="pf-color-black-850    swatch ">pf-color-black-850    </div>
<div class="pf-color-black-900    swatch ">pf-color-black-900    </div>
<div class="pf-color-black-1000  swatch ">pf-color-black-1000  </div>

SassMeister-input.scss

// ----
// Sass (vundefined)
// Compass (vundefined)
// dart-sass (v1.18.0)
// ----

// Colors
$pf-color-black-100:             #fafafa !default;
$pf-color-black-150:             #f5f5f5 !default;
$pf-color-black-200:             #f0f0f0 !default;
$pf-color-black-300:             #d2d2d2 !default;
$pf-color-black-400:             #b8bbbe !default;
$pf-color-black-500:             #8a8d90 !default;
$pf-color-black-600:             #6a6e73 !default;
$pf-color-black-600-alt:         #636A6E !default;
$pf-color-black-700:             #4f5255 !default;
$pf-color-black-800:             #3c3f42 !default;
$pf-color-black-850:             #212427 !default;
$pf-color-black-900:             #151515 !default;
$pf-color-black-1000:            #030303 !default;

.pf-color-black-100     {   background-color: $pf-color-black-100;    }
.pf-color-black-150     {   background-color: $pf-color-black-150;    }
.pf-color-black-200     {   background-color: $pf-color-black-200;    }
.pf-color-black-300     {   background-color: $pf-color-black-300;    }
.pf-color-black-400     {   background-color: $pf-color-black-400;    }
.pf-color-black-500     {   background-color: $pf-color-black-500;    }
.pf-color-black-600     {   background-color: $pf-color-black-600;    }
.pf-color-black-600-alt {   background-color: $pf-color-black-600-alt;}
.pf-color-black-700     {   background-color: $pf-color-black-700;    }
.pf-color-black-800     {   background-color: $pf-color-black-800;    }
.pf-color-black-850     {   background-color: $pf-color-black-850;    }
.pf-color-black-900     {   background-color: $pf-color-black-900;    }
.pf-color-black-1000   {   background-color: $pf-color-black-1000;   }


.pf-color-black-600     ,
.pf-color-black-600-alt ,
.pf-color-black-700     ,
.pf-color-black-800     ,
.pf-color-black-850     ,
.pf-color-black-900     ,
.pf-color-black-1000   {   color: white; }

.swatch {
  padding: 10px;
  display: inline-block;
}

SassMeister-output.css

.pf-color-black-100 {
  background-color: #fafafa;
}

.pf-color-black-150 {
  background-color: #f5f5f5;
}

.pf-color-black-200 {
  background-color: #f0f0f0;
}

.pf-color-black-300 {
  background-color: #d2d2d2;
}

.pf-color-black-400 {
  background-color: #b8bbbe;
}

.pf-color-black-500 {
  background-color: #8a8d90;
}

.pf-color-black-600 {
  background-color: #6a6e73;
}

.pf-color-black-600-alt {
  background-color: #636A6E;
}

.pf-color-black-700 {
  background-color: #4f5255;
}

.pf-color-black-800 {
  background-color: #3c3f42;
}

.pf-color-black-850 {
  background-color: #212427;
}

.pf-color-black-900 {
  background-color: #151515;
}

.pf-color-black-1000 {
  background-color: #030303;
}

.pf-color-black-600,
.pf-color-black-600-alt,
.pf-color-black-700,
.pf-color-black-800,
.pf-color-black-850,
.pf-color-black-900,
.pf-color-black-1000 {
  color: white;
}

.swatch {
  padding: 10px;
  display: inline-block;
}

SassMeister-rendered.html

<div class="pf-color-black-100    swatch ">pf-color-black-100    </div>
<div class="pf-color-black-150    swatch ">pf-color-black-150    </div>
<div class="pf-color-black-200    swatch ">pf-color-black-200    </div>
<div class="pf-color-black-300    swatch ">pf-color-black-300    </div>
<div class="pf-color-black-400    swatch ">pf-color-black-400    </div>
<div class="pf-color-black-500    swatch ">pf-color-black-500    </div>

<div class="pf-color-black-600    swatch ">pf-color-black-600    </div>

<div class="pf-color-black-600-alt swatch ">pf-color-black-600-alt</div>
<br/>
<div class="pf-color-black-700    swatch ">pf-color-black-700    </div>
<div class="pf-color-black-800    swatch ">pf-color-black-800    </div>
<div class="pf-color-black-850    swatch ">pf-color-black-850    </div>
<div class="pf-color-black-900    swatch ">pf-color-black-900    </div>
<div class="pf-color-black-1000  swatch ">pf-color-black-1000  </div>