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

您可以在地图中直接使用您的颜色作为 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);
    }
  }
}