编译后未显示 SASS/SCSS 调色板值（白色/黑色）

Question

How are you I have some issues in a SASS/SCSS Project I worked on a simple UI Color Palette using scss anyway this code is work but a part of it not the White and black not showing after compiling.

Here is my Full Code :

// Base Colors Variables

$transparent: transparent !default;
$currentColor: currentColor !default;
$black: #000000 !default;
$white: #FFFFFF !default;

// Gray Colors Variables

$gray-50:  #FAFAFA !default;

$borderColor: (
  "border": (
    "transparent": (
      "border-transparent": $transparent
    ),
    "current": (
      "border-current": $currentColor
    ),
  ),
  "border-white": (
    "--border-opacity": 1,
    "border-hex": $white, 
    "border-rgba": "rgba(255, 255, 255, var(--border-opacity))"
  ),
  "border-black": (
    "--border-opacity": 1,
    "border-hex": $black, 
    "border-rgba": "rgba(0, 0, 0, var(--border-opacity))"
  ),
  "border-gray": (
    "50": (
      "--border-opacity": 1,
      "border-hex": $gray-50, 
      "border-rgba": "rgba(250, 250, 250, var(--border-opacity))"
    )
  )
) !default;

@each $borderColorClassName , $borderColorCode in $borderColor {
    @each $bordercolor-shade, $bordercolor-specs in $borderColorCode {
        .#{$borderColorClassName}-#{$bordercolor-shade} {
            @each $property, $value in $bordercolor-specs {
                @if ($property == "--border-opacity") {
                    #{$property}: #{$value};
                } @else {
                    border-color: #{$value};
                }
            }
        }
    }
}

The Output that I want to display :

for Notice everything it work but only the .border-white and .border-black not showing.

.border-transparent {
  border-color: transparent;
}

.border-current {
  border-color: currentColor;
}

.border-white {
  --border-opacity: 1;
  border-color: #FFFFFF;
  border-color: "rgba(255, 255, 255, var(--border-opacity))";
}

.border-black {
  --border-opacity: 1;
  border-color: #000000;
  border-color: "rgba(0, 0, 0, var(--border-opacity))";
}

.border-gray-50 {
  --border-opacity: 1;
  border-color: #FAFAFA;
  border-color: rgba(250, 250, 250, var(--border-opacity));
}

Answer 1

Your .border-white and .border-black classes are not showing because the third @each loop doesn't have anything to loop for. You either need to add a nesting level as you did for "border-gray" and "border" or just move the "black" and "white" properties in the "border" map:

$borderColor: (
  "border": (
    "transparent": (
      "border-transparent": $transparent
    ),
    "current": (
      "border-current": $currentColor
    ),
    "white": (
      "--border-opacity": 1,
      "border-hex": $white, 
      "border-rgba": "rgba(255, 255, 255, var(--border-opacity))"
    ),
    "black": (
      "--border-opacity": 1,
      "border-hex": $black, 
      "border-rgba": "rgba(0, 0, 0, var(--border-opacity))"
     )
  ),
  "border-gray": (
    "50": (
      "--border-opacity": 1,
      "border-hex": $gray-50, 
      "border-rgba": "rgba(250, 250, 250, var(--border-opacity))"
    )
  )
) !default;