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

Posted 2023-03-07

【中文标题】如何在 Rgba SASS/SCSS 中显示具有不透明度的 CurrentColor？

【英文标题】：How to Display CurrentColor with Opacity in Rgba SASS/SCSS?

【发布时间】：2021-01-31 05:13:18

【问题描述】：

有什么方法可以在 Colors 列表中使用 在 Rgba 中显示 CurrentColor 和 Opacity 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)));

【问题讨论】：

你尝试了什么？

你可以查看这个question to know more about what I want to do

我添加了一个答案。在旁注中，就像@Arkellys 所说的那样，你将不得不开始展示你已经尝试过一些东西。到目前为止，您提出的所有问题都表明您甚至没有尝试解决问题。

【参考方案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));

【讨论】：

当我在 sassmeister 中测试代码时它可以工作，但在我的本地开发和 codepen 中显示错误 $color: "0 , 0, 0" 不是 `rgba' 的颜色 Check this