具有HEX和RGB格式的SCSS / SASS @each循环调色板 编辑RGBA函数问题

问题描述

如何使用 @each循环

显示具有HEX和RGB格式的调色板

调色板变量：

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

编译为CSS后的预期结果：

.color-transparent {
  color: transparent;
}

.color-current {
  color: currentColor;
}

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

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

解决方法

这是您使用@each和地图的方式。

$colors: (
  "transparent": transparent,"current": currentColor,"white": (
    hex: #FFFFFF,rgba: (255,255,var(--color-opacity))
  ),"black": (
    hex: #000000,rgba: (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,var(--color-opacity));
}

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

编辑RGBA（）函数问题

要解决如果rgba()引发频道错误的问题，可以在@else部分后面删除hex，并将十六进制值传递到rgba()函数中。这会将十六进制转换为rgb值。

$colors: (
  "transparent": transparent,$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));
                } 
            }
        }
    }
}