如何将 '%' 添加到值中？

【问题标题】：How can I add '%' into values?如何将 '%' 添加到值中？
【发布时间】：2020-06-10 14:20:27
【问题描述】：

我想做这个，但我不知道怎么做......

$opacities: (10,20,30,40,50,60,70,80,90);

@each $opacity in $opacities {
   .bg-opacity-#{$opacity}-#{$color} {
      background-color: rgba($value, $opacity+%);
   }
}

因为我想要这个结果

.bg-opacity-2-primary {
   background-color: rgba(20,15,45, 0.2);
}

但这是不可能的。我还没有找到解决方案

【问题讨论】：

你只需要将你拥有的值除以 100，它就会从 0 变为 1，这就是 rgba 不透明度的表示方式
你能举个例子吗？

标签： sass scss-mixins

【解决方案1】：

我已经解决了与 SCSS 每个循环相关的上述问题。请尝试此方法来解决您的问题。

SCSS 代码

$color:red;

$opacities: (10,20,30,40,50,60,70,80,90);

@each $opacity in $opacities {
    .bg-opacity-#{$opacity}-#{$color} {
        background-color: rgba($color, $opacity/100);
     }
}

CSS 输出

.bg-opacity-10-red {
  background-color: rgba(255, 0, 0, 0.1);
}

.bg-opacity-20-red {
  background-color: rgba(255, 0, 0, 0.2);
}

.bg-opacity-30-red {
  background-color: rgba(255, 0, 0, 0.3);
} ...

还有关于 SCSS 每个循环的更多信息，请访问Learnopidia - SCSS Each loop Article。

【讨论】：