如何在 Rgba SASS/SCSS 中以不透明度显示 CurrentColor？

Question

有什么方法可以显示 CurrentColor with Opacity in Rgba from 颜色列表使用 SASS/SCSS?

我的颜色列表：

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

编译成CSS后的预期结果：

.color-transparent {
  --color-opacity: 0;
  --color-var: transparent;
  color: (var(--color-var), rgba(0, 0, 0, var(--color-opacity)));
}

.color-current {
  --color-opacity: 0;
  --color-var: currentColor;
  color: (var(--color-var), rgba(255, 255, 255, var(--color-opacity)));
}

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

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

Answer 1

操作方法如下：

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


// $COLOR = KEY, $VALUE = VALUE, $COLORS = MAP
@each $color, $values in $colors {
    .color-#{$color} {
        --color-opacity: 0;
        @each $value, $subvalue in $values {
            @if $value == 'hex' {
        --color-var: #{$subvalue};
            } @else {
                color: ( var(--color-var), rgba( #{$subvalue}, var(--color-opacity)));
            }
        }
    }
}

CSS 输出

.color-transparent {
  --color-opacity: 0;
  --color-var: transparent;
  color: var(--color-var), rgba(0, 0, 0, var(--color-opacity));
}

.color-current {
  --color-opacity: 0;
  --color-var: currentColor;
  color: var(--color-var), rgba(255, 255, 255, var(--color-opacity));
}

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

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

如何在 Rgba SASS/SCSS 中以不透明度显示 CurrentColor？

How to Display CurrentColor with Opacity in Rgba SASS/SCSS?

css

sass

twitter-bootstrap

tailwind-css

CSS 输出