Generated by SassMeister.com.

input.scss

$gray-50:  #999;
$gray-100: #888;
$gray-200: #777;
$gray-300: #666;
$gray-400: #555;
$gray-500: #444;
$gray-600: #333;
$gray-700: #222;
$gray-800: #111;
$gray-900: #000;

$colors: (
  "transparent": transparent,
  "current": currentColor,
  "black": $gray-700,
  "white": #fff,
  "gray-50": $gray-50,
  "gray-100": $gray-100,
  "gray-200": $gray-200,
  "gray-300": $gray-300,
  "gray-400": $gray-400
);

@each $name, $color in $colors {
  .b-#{$name} {
    border-color: $color !important;
  }
}

output.css

.b-transparent {
  border-color: transparent !important;
}

.b-current {
  border-color: currentColor !important;
}

.b-black {
  border-color: #222 !important;
}

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

.b-gray-50 {
  border-color: #999 !important;
}

.b-gray-100 {
  border-color: #888 !important;
}

.b-gray-200 {
  border-color: #777 !important;
}

.b-gray-300 {
  border-color: #666 !important;
}

.b-gray-400 {
  border-color: #555 !important;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}