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会吐出十六进制值，它们需要用作类。）< / p>

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

如何将SCSS十六进制值转换为字符串，以便可以用于CSS类名？

1 个答案: