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);
    }
  }
}

scss内插帮助，用于传递值

1 个答案: