css - scss 插值有助于传递值

Question

我需要创建动态类，我正在为其创建一个 scss 代码来为所有可能的值创建类。下面是我的代码:-

$colors: (
    "black": "0,0,0",
    "white": "255,255,255",
    "red" : "255,0,0"
);


$opacity:9;
@for $i from 0 through $opacity {
  $j:$i/10;
  @each $color, $rgb in $colors {
    $rgba: "#{$rgb},#{$j}";
    .background-#{$color}-#{$i} {
      background: #{$rgba};
    }
  }
}

我希望它输出为:-

.background-black-0 {
  background: rgba(0,0,0,0);
}

.background-white-0 {
  background: rgba(255,255,255,0);
}

.background-red-0 {
  background: rgba(255,0,0,0);
}

.background-black-1 {
  background: rgba(0,0,0,0.1);
}

.background-white-1 {
  background: rgba(255,255,255,0.1);
}

.background-red-1 {
  background: rgba(255,0,0,0.1);
}

努力处理 rgba() 的插值。否则它会得到我想要的确切值。如果你在 https://www.sassmeister.com/ 中查看我的代码你会看到的。

Answer 1

您可以在 map 中直接使用您的颜色作为 rgb 颜色，然后在您的 @for 循环中添加不透明度:

$colors: (
    "black": rgb(0,0,0),
    "white": rgb(255,255,255),
    "red": rgb(255,0,0)
);


$opacity:9;

@for $i from 0 through $opacity {
  $j:$i/10;
  @each $color, $rgb in $colors {
    .background-#{$color}-#{$i} {
      background: rgba($rgb, $j);
    }
  }
}