Как преобразовать шестнадцатеричное значение SCSS в строку, чтобы его можно было использовать для имени класса CSS?

Question

У меня много переменных SCSS, таких как:

$blue:    #007bff !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #e83e8c !default;
$red:     #dc3545 !default;

Можно ли преобразовать значение $blue в строку?так было бы:

$blue: "007bff";

На данный момент мне нужно сделать это:

$blue:    #007bff !default;

$primary:       $blue !default;
$primary-hex:   "007bff";

$theme-colors: () !default;
$theme-colors: map-merge((
  "primary":      $primary,
  $primary-hex:   $primary
), $theme-colors);

Причина этого в том, что я хочу использовать его как часть имени переменной(Я знаю ... не очень хорошая практика, но это необходимо, потому что наша CMS выдает шестнадцатеричные значения и их нужно использовать в качестве классов.)

Answer 1

Я нашел ответ, надеюсь, это поможет кому-то еще:

$theme-colors: () !default;
$theme-colors: map-merge((
  "primary":    $primary,
  str-replace(#{$primary}, '#', '') :    $primary
), $theme-colors);

Бит ключа #{}.

Функция str-replace:

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}