如何在Sass中将浮点数转为带转义符的字符串用于CSS类选择器

安全阿岳

2026-9-26

实现方案

你可以通过Sass内置的字符串处理函数完成小数点的转义，核心逻辑是把传入的数值转为字符串后，替换.为转义后的\.即可。

完整示例代码

// 低版本Sass无内置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;
}

// 数值小数点转义专用函数
@function escape-dot($num) {
  $str: "#{$num}";
  // 注意Sass语法中反斜杠需要双重转义
  @return str-replace($str, ".", "\\.");
}

// 你的工具类生成mixin
@mixin generate-text-utils($size-list) {
  @each $size in $size-list {
    // 对应你需要替换的<how-to-convert-font-rem?>位置
    $escaped-size: escape-dot($size);
    .u-text-#{$escaped-size} {
      font-size: #{$size}rem;
    }
  }
}

// 调用示例
@include generate-text-utils(1.2 1.4 1.6 1.8 2 2.4);

编译后输出效果

.u-text-1\.2 {
  font-size: 1.2rem;
}
.u-text-1\.4 {
  font-size: 1.4rem;
}
.u-text-1\.6 {
  font-size: 1.6rem;
}
.u-text-1\.8 {
  font-size: 1.8rem;
}
.u-text-2 {
  font-size: 2rem;
}
.u-text-2\.4 {
  font-size: 2.4rem;
}