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

嘿，我懂你手动改一堆颜色变量的痛苦！既然你因为CMS的限制必须把十六进制值转成字符串用作类名/变量名一部分，完全不用挨个手动改，SCSS有现成的方法能帮你自动搞定：

你的核心需求回顾 #

你手里有一大堆这样的SCSS变量：

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

想要把它们转成$blue: "007bff";这种字符串形式，不用再手动写$primary-hex: "007bff"这种重复且容易出错的代码。

解决方案1：自定义函数一键转换 #

写个简单的SCSS函数，就能把任意颜色变量转成不带#的纯十六进制字符串：

@function hex-to-string($color) {
  // 先把颜色值转成带#的字符串（比如#007bff会变成"#007bff"）
  $color-with-hash: inspect($color);
  // 切掉开头的#字符，得到纯十六进制字符串
  @return str-slice($color-with-hash, 2);
}

// 用法超简单
$blue: #007bff !default;
$blue-hex: hex-to-string($blue); // 结果就是"007bff"

解决方案2：批量处理所有颜色变量 #

如果你有一大堆颜色需要处理，直接把它们放进map里批量操作，连变量定义带类名生成一步到位：

// 把所有原始颜色变量整理进一个map
$base-colors: (
  blue: #007bff,
  indigo: #6610f2,
  purple: #6f42c1,
  pink: #e83e8c,
  red: #dc3545
) !default;

// 批量生成变量和符合要求的类名
@each $color-name, $color-value in $base-colors {
  // 生成原始颜色变量（比如$blue: #007bff）
  $#{$color-name}: $color-value !default;
  // 生成对应的十六进制字符串变量（比如$blue-hex: "007bff"）
  $#{$color-name}-hex: hex-to-string($color-value);
  
  // 直接生成CMS需要的类名（比如.bg-blue-007bff）
  .#{"bg-#{$color-name}-#{$#{$color-name}-hex}"} {
    background-color: $color-value;
  }
}

这样你再也不用手动复制粘贴十六进制值了，一次处理所有颜色，还能自动生成符合需求的类名，完美适配你的场景。

补充：临时使用的快捷方式 #

如果只是偶尔需要用到这个字符串，甚至不用单独定义变量，直接在需要的地方插值即可：

$blue: #007bff !default;

// 直接生成目标类名
.#{"text-#{str-slice(inspect($blue), 2)}"} {
  color: $blue;
}

内容的提问来源于stack exchange，提问作者Ginger Squirrel