具有 HEX 和 RGB 格式的 SCSS/SASS @each 循环调色板答案

【问题标题】：SCSS/SASS @each loop Color Palette with HEX and RGB formats具有 HEX 和 RGB 格式的 SCSS/SASS @each 循环调色板
【发布时间】：2021-01-30 03:47:33
【问题描述】：

如何使用 @each 循环

显示此 HEX 和 RGB 格式的调色板

调色板变量：

$colors: (
  "transparent": transparent,
  "current": currentColor,
  "white": (
    hex: #FFFFFF,
    rgb: (255, 255, 255)
  ),
  "black": (
    hex: #000000,
    rgb: (0, 0, 0)
  )
) !default;

编译成 CSS 后我期望的结果：

.color-transparent {
  color: transparent;
}

.color-current {
  color: currentColor;
}

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

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

【问题讨论】：

标签： css sass less postcss

【解决方案1】：

以下是使用 @each 和地图的方法。

$colors: (
  "transparent": transparent,
  "current": currentColor,
  "white": (
    hex: #FFFFFF,
    rgba: (255, 255, 255, var(--color-opacity))
  ),
  "black": (
    hex: #000000,
    rgba: (0, 0, 0, var(--color-opacity))
  )
) !default;

// $COLOR = KEY, $VALUE = VALUE, $COLORS = MAP
@each $color, $value in $colors {
    // SINGLE VALUE
    @if $color == "transparent" {
       .color-#{$color} {
           color: #{$value};
       }
    } @else if $color == "current" {
        .color-#{$color} {
            color: $value;
        }
    // SUBMAP - SINCE $VALUE IS ANOTHER MAP HERE.   
    } @else {
        // SET THE COLOR NAME
        .color-#{$color} {
        // SET YOUR COLOR OPACITY    
        --color-opacity: 1;
        // LOOP THROUGH THE TWO COLORS IN THE SUBMAP
        @each $color_name, $value_c in $value {
            @if $color_name == hex {
                color: $value_c;
            } @else {
                color: rbga( $value_c );
               }
            }
        }
    }
}

CSS 输出

.color-transparent {
  color: transparent;
}

.color-current {
  color: currentColor;
}

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

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

EDIT FOR RGBA() 函数问题

若要解决rgba() 引发通道错误的问题，您可以删除hex 部分之后的@else，并将十六进制值传递给rgba() 函数。这会将十六进制转换为 rgb 值。

$colors: (
  "transparent": transparent,
  "current": currentColor,
  "white": (
    hex: #FFFFFF,
    rgba: (255, 255, 255, var(--color-opacity))
  ),
  "black": (
    hex: #000000,
    rgba: (0, 0, 0, var(--color-opacity))
  )
) !default;

// $COLOR = KEY, $VALUE = VALUE, $COLORS = MAP
@each $color, $value in $colors {
    // SINGLE VALUE
    @if $color == "transparent" {
       .color-#{$color} {
           color: #{$value};
       }
    } @else if $color == "current" {
        .color-#{$color} {
            color: $value;
        }
    // SUBMAP - SINCE $VALUE IS ANOTHER MAP HERE.   
    } @else {
        // SET THE COLOR NAME
        .color-#{$color} {
            // SET YOUR COLOR OPACITY    
            --color-opacity: 1;
            // LOOP THROUGH THE TWO COLORS IN THE SUBMAP
            @each $color_name, $value_c in $value {
                // WE ONLY WANT TO USE HEX, BECAUSE RGBA() IS A NATIVE FUNCTION
                @if $color_name == hex {
                color: $value_c;
                color: rgba( $value_c, var(--color-opacity));
                } 
            }
        }
    }
}

【讨论】：

我在此更改中有一个问题color: (rgba($value_c)); 他们给我一个错误$channels must be a space-separated in list
那是因为 SASS 有一个内置的rgba() 函数。等一下，我再补充一个方法。
@houssamdetective1105 更新了仅使用 hex 值的新代码块。