如何在SCSS文件中编写if else逻辑实现十六进制颜色与rgba格式互转

问题原因 #

你之前的写法用了JavaScript风格的字符串方法，SCSS作为CSS预处理器有自己专属的内置函数，不支持直接调用JS方法，因此会出现运行报错。

可直接运行的实现代码 #

用到的SCSS内置函数说明：

• str-slice()：截取字符串片段，用来判断值的开头字符
• str-replace()：字符串替换，低版本sass可手动拼接实现
• red()/green()/blue()/alpha()：提取rgba颜色的各通道分量

// 定义颜色变量，可替换为rgba值测试，例如 $newccolor: rgba(87, 166, 186, 0.8);
$newccolor: #57a6ba;

// 处理十六进制格式
@if str-slice($newccolor, 1, 1) == "#" {
  // 替换#为%23，需要在代码块外使用变量就加!global，不需要可以删掉
  $newccolor: str-replace($newccolor, '#', '%23') !global;
}
// 处理rgba格式，转换为Hexa
@else if str-slice($newccolor, 1, 4) == "rgba" {
  // 数值转十六进制的辅助函数
  @function to-hex($value) {
    $hex: "";
    $chars: "0123456789ABCDEF";
    @while $value > 0 {
      $rem: $value % 16;
      $value: floor($value / 16);
      $hex: str-slice($chars, $rem + 1, $rem + 1) + $hex;
    }
    @return if(str-length($hex) == 1, "0" + $hex, $hex);
  }

  // 提取各通道分量
  $r: red($newccolor);
  $g: green($newccolor);
  $b: blue($newccolor);
  $a: alpha($newccolor);

  // 组合为带透明度的8位Hexa格式
  $hex-r: to-hex($r);
  $hex-g: to-hex($g);
  $hex-b: to-hex($b);
  $hex-a: to-hex(floor($a * 255));
  $newccolor: "#" + $hex-r + $hex-g + $hex-b + $hex-a !global;
}

// 测试输出
body {
  background-color: $newccolor;
}

低版本兼容说明 #

如果使用的sass版本低于dart-sass 1.23.0，没有内置str-replace函数，可以把十六进制替换逻辑改为手动拼接：

$newccolor: "%23" + str-slice($newccolor, 2) !global;

如果转换后的颜色是用于CSS属性赋值而非URL参数，不需要做#转%23的操作。

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