Могу ли я сделать свою переменную classname в sass?

Question

Возможно ли сделать переменную имени класса в sass.Если да, то как я могу сделать следующее:

$colorlist();

$blue:    #007bff;
$yellow:  #99s9e0;
$red:  #f4i304;

$colorlist: map-merge((
 "blue":   $blue,
 "yellow":  $yellow,
 "red":     $red,
)
$colorlist
);

Теперь я хочу написать в классе HTML: «bg-blue» bg - это класс, который дает элементу цвет фона, определенный цветом после '- 'знак.

в настоящее время у меня есть это:

$red:  #900;
$colorlist();
$colorlist: map-merge(
                (
                       "color1": $red,
                ),
                $colorlist
);


.bg-#{$colorlist} {
  background-color: $colorlist;
}

с предложением ReSedano

$red:  #900;
$colorlist();
$color();
$colorlist: map-merge(
                (
                       "color1": $red,
                ),
                $colorlist
);


.backg-#{$color} {
  background-color: map_get($colorlist,$color);
}

Answer 1

Попробуйте следующим образом:

$red:  #900;
$colorlist:();
$color:();
$colorlist: map-merge(
   (
      red: $red,
    ),
  $colorlist
);

@mixin background($color){
  .backg-#{$color} {
    background-color: map-get($colorlist,$color);
  }
}


@include background(red);

Ваш вывод будет таким:

.backg-red {
  background-color: #900;
}