справка интерполяции 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);
    }
  }
}