Sass String(字符串) 函数（千字长文）

Sass String(字符串) 函数：让样式表更智能的字符串操作利器

在 CSS 的世界里，样式是静态的。但当你开始使用 Sass，一切就变得不一样了。Sass 不仅支持变量、嵌套和混合，还内置了一整套强大的函数系统，其中 Sass String(字符串) 函数 是最常被忽视却极为实用的一环。

想象一下，你正在开发一个大型前端项目，需要为不同主题生成颜色类名，比如 .theme-primary、.theme-secondary。手动写这些类名既繁琐又容易出错。而通过 Sass 的字符串函数，你可以在编译时动态拼接、截取、替换字符串，让代码更灵活、更可维护。

本文将带你从零开始掌握 Sass 中的字符串函数，结合真实案例，让你在实际开发中真正用起来。

字符串函数基础：理解 Sass 的“文字处理能力”

Sass 的字符串函数不是用来做文本编辑的，而是为了在编译阶段动态生成 CSS 类名、属性值、URL 路径等。它们就像一个“自动拼图工具”，你提供原始字符串，它帮你组合、裁剪、替换，最终输出你需要的样式。

Sass 中的字符串函数都以 str- 为前缀，比如 str-index、str-replace、str-length 等。这些函数不修改原始字符串，而是返回新的字符串结果。

📌 关键点：所有字符串函数都接受字符串作为参数，并返回一个新字符串，不会改变原始值。这符合函数式编程的“不可变性”原则。

字符串拼接与插值：构建动态类名和路径

最基础也最常用的功能是字符串拼接。Sass 通过插值（#{} ）和 str-cat 函数实现。

// 示例：动态生成主题类名
$theme-prefix: "theme-";
$theme-colors: (primary, secondary, success, danger);

@each $color in $theme-colors {
  .#{$theme-prefix}#{$color} {
    background-color: map-get(
      (
        primary: #007bff,
        secondary: #6c757d,
        success: #28a745,
        danger: #dc3545
      ),
      $color
    );
    color: white;
    padding: 10px;
  }
}

📌 注释：

• #{$theme-prefix}#{$color} 是插值语法，将变量动态拼接成类名。
• @each 遍历颜色列表，为每种颜色生成一个类。
• 最终输出的 CSS 会是 .theme-primary { ... } 这样的结构。

如果你不想用插值，也可以用 str-cat 函数：

// 使用 str-cat 函数拼接
$prefix: "btn-";
$size: "large";
$state: "active";

.btn {
  &-#{$prefix}#{$size} {
    font-size: 16px;
    padding: 12px 24px;
  }

  &-#{$prefix}#{$size}#{$state} {
    background-color: #007bff;
    border: 2px solid #0056b3;
  }
}

📌 注释：

• str-cat 可以用于拼接多个字符串，但通常插值更直观。
• str-cat 接受任意数量的参数，返回拼接后的字符串。

字符串查找与索引：定位子串位置

当你需要判断某个字符串中是否包含特定关键词，或者获取其位置时，str-index 函数就派上用场了。

// 示例：检查类名是否包含 "active"
$classes: "btn btn-primary active btn-large";

@function is-active($class-list) {
  // 查找 "active" 在字符串中的位置
  $index: str-index($class-list, "active");
  
  // 如果返回值不为 0，说明找到了
  @if $index {
    @return true;
  } @else {
    @return false;
  }
}

// 使用函数
.btn {
  @if is-active($classes) {
    border-color: #007bff;
    background-color: #0056b3;
  }
}

📌 注释：

• str-index($string, $substring) 返回子串首次出现的位置（从 1 开始）。
• 如果没找到，返回 null，在布尔上下文中为 false。
• 这个函数常用于条件判断，比如判断某个类是否已存在。

💡 小贴士：str-index 是大小写敏感的，"Active" 和 "active" 会被视为不同字符串。

字符串替换：动态修改文本内容

str-replace 是最实用的函数之一。它允许你把字符串中某个子串替换成另一个。

// 示例：统一替换图标类名前缀
$icon-classes: (
  "fa fa-home",
  "fa fa-user",
  "fa fa-star",
  "fa fa-heart"
);

// 将所有 "fa" 替换为 "icon"
@each $icon in $icon-classes {
  .icon-#{$icon} {
    @if str-index($icon, "fa") {
      content: str-replace($icon, "fa", "icon");
    } @else {
      content: $icon;
    }
  }
}

📌 注释：

• str-replace($string, $search, $replace) 会替换所有匹配的子串。
• 本例中，"fa fa-home" 会被替换成 "icon icon-home"。
• 这在迁移图标库时特别有用，比如从 Font Awesome 迁移到自定义图标字体。

✅ 重要提示：str-replace 是全局替换，不是只替换第一个。如果只想替换第一个，需要用 str-index + str-slice 手动控制。

字符串截取与提取：精准获取子串

有时你只需要字符串的一部分。str-slice 函数能帮你精确截取。

// 示例：从 URL 中提取文件名
$full-url: "https://example.com/images/avatar.png?size=128x128";

@function get-filename($url) {
  // 找到最后一个斜杠的位置
  $last-slash: str-index(reverse($url), "/");
  
  // 从最后斜杠后开始截取，直到问号或结尾
  $start: $last-slash + 1;
  $end: str-index($url, "?") or str-length($url) + 1;
  
  @return str-slice($url, $start, $end - 1);
}

// 使用
.avatar {
  background-image: url("#{$full-url}");
  width: 64px;
  height: 64px;
  
  &::before {
    content: get-filename($full-url); // 输出 "avatar.png"
  }
}

📌 注释：

• str-slice($string, $start, $end) 从 $start 位置截取到 $end 位置（含）。
• reverse() 用于从后往前查找，提高效率。
• or 用于处理未找到的情况，返回默认值。

这个函数在处理路径、ID、版本号等场景非常实用。

字符串长度与格式化：获取信息与美化输出

str-length 和 str-insert 是两个常被忽略但非常有用的函数。

// 示例：添加前导零，格式化编号
@function pad-number($num, $width: 2) {
  $num-str: str-replace($num, " ", ""); // 去除空格
  $len: str-length($num-str);
  $pad: $width - $len;
  
  @if $pad > 0 {
    @return str-insert("0", $num-str, 1); // 在开头插入 0
  } @else {
    @return $num-str;
  }
}

// 使用
.card {
  &-01 { content: "第 " + pad-number(1) + " 项"; } // 输出“第 01 项”
  &-10 { content: "第 " + pad-number(10) + " 项"; } // 输出“第 10 项”
}

📌 注释：

• str-length($string) 返回字符串长度。
• str-insert($string, $insert, $index) 在指定位置插入字符串。
• 本例中，pad-number(1) 会生成 01，用于统一显示格式。

✨ 进阶技巧：str-insert 可以配合循环使用，实现自动补位、编号生成等。

实战案例：构建可复用的图标组件系统

现在我们用所有函数整合一个真实项目中的场景：创建一个图标组件，支持动态类名、颜色、大小。

// 变量定义
$icon-prefix: "icon";
$icon-sizes: (small, medium, large);
$icon-colors: (primary, secondary, success, danger);

// 动态生成图标类
@each $size in $icon-sizes {
  @each $color in $icon-colors {
    .#{$icon-prefix}-#{$size}-#{$color} {
      @if str-index($color, "primary") {
        color: #007bff;
      } @else if str-index($color, "success") {
        color: #28a745;
      } @else {
        color: #6c757d;
      }

      font-size: if($size == "small", 12px, if($size == "large", 24px, 16px));
      line-height: 1.5;
    }
  }
}

// 附加功能：生成 CSS 变量
@function generate-icon-vars() {
  $result: "";
  @each $size in $icon-sizes {
    $var-name: "--icon-size-#{$size}";
    $value: if($size == "small", "12px", if($size == "large", "24px", "16px"));
    $result: $result + "#{$var-name}: #{$value}; ";
  }
  @return $result;
}

:root {
  #{generate-icon-vars()}
}

📌 注释：

• 使用 @each 嵌套生成所有组合。
• 用 str-index 判断颜色类型，动态设置颜色。
• if 语句配合 str-length 实现条件逻辑。
• 最后生成 CSS 变量，提升可维护性。

总结：让 Sass 字符串函数成为你的开发利器

通过本文的学习，你应该已经掌握了 Sass 中字符串函数的核心用法。它们不仅仅是“字符串处理工具”，更是你构建可复用、可配置、可扩展组件系统的基石。

从拼接类名到替换路径，从查找位置到截取信息，Sass String(字符串) 函数 让你在编译阶段就拥有强大的文本操作能力。它不仅能减少重复代码，还能避免人为错误，提升开发效率。

记住，真正的高手不是靠记忆函数，而是理解“什么时候该用哪个函数”。多在项目中尝试，你会发现这些函数比你想象的更有用。

最后提醒：Sass 的强大，不在于它能做什么，而在于你如何用它去解决问题。从今天起，让字符串函数成为你的开发伙伴。