[英]SCSS/SASS @each loop Color Palette with HEX and RGB formats
How I can display this Color Palette with HEX and RGB formats by using @each loop如何使用@each 循环以十六进制和 RGB 格式显示此调色板
Color Palette Variable :调色板变量:
$colors: (
"transparent": transparent,
"current": currentColor,
"white": (
hex: #FFFFFF,
rgb: (255, 255, 255)
),
"black": (
hex: #000000,
rgb: (0, 0, 0)
)
) !default;
The result that I expected after compiling to CSS :编译为 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));
}
Here's how you do it with @each
and the map.以下是您如何使用
@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 );
}
}
}
}
}
.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));
}
To fix the issue if rgba()
is throwing the channels error, you can remove the @else
after the hex
section and pass the hex value into the rgba()
function.要解决
rgba()
@else
通道错误时的问题,您可以删除hex
部分后的@else
并将hex
进制值传递给rgba()
函数。 This will convert the hex to an rgb value.这会将十六进制转换为 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));
}
}
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.