在 Sass 中，字符串（Strings） 是用于表示文本内容的数据类型，支持带引号、不带引号以及插值表达式。以下是 Sass 字符串类型的详细说明：

一、字符串值的形式

Sass 字符串可以是以下三种形式：

形式	示例	说明
带双引号	"Hello Sass"	支持插值（#{}）和转义字符
带单引号	'Open Sans'	与双引号等效，但更简洁
不带引号	sans-serif	常用于 CSS 关键字（如字体名）

二、常见操作

1、字符串拼接

• + 运算符：直接拼接字符串（保留引号）。

  $str: "Hello" + " Sass"; // "Hello Sass"（双引号）
  $font: "Open" + Sans; // "OpenSans"（单引号，需注意空格）

• #{} 插值：动态插入变量或表达式（自动去引号）。

  $name: "Bold";
  .text-#{$name} {
    // 编译为 .text-Bold
    font-weight: $name;
  }

2、引号处理

• quote() / unquote()：添加或移除引号。

  quote(sans-serif)     // "sans-serif"
  unquote("Open Sans")  // Open Sans

3、转义字符

• 使用 \ 转义特殊字符（如 ", ', \n）。

  $escaped: 'This is a "quote"'; // 输出：This is a "quote"

三、字符串函数

Sass 提供了一系列内置函数处理字符串：

函数	作用	示例	编译结果
unquote()	移除字符串的引号	unquote("kangkang")	kangkang
quote()	给字符串加引号	quote(kangkang)	"kangkang"
str-length($string)	获取字符串长度	str-length("Sass")	4
str-index($string, $substr)	查找子串位置（从 1 开始）	str-index("Sass", "a")	2
str-insert($string, $insert, $index)	插入子字符串	str-insert("Sss", "a", 2)	"Sass"
str-slice($string, $start, $end)	截取子字符串	str-slice("Hello", 2, 4)	"ell"
to-lower-case($string)	转为小写	to-lower-case("ITALIC")	"italic"
to-upper-case($string)	转为大写	to-upper-case("bold")	"BOLD"
unique-id()	生成唯一随机 ID（如 uab1c2）	unique-id()	uab1c2

四、实际应用场景

1、动态生成类名

$types: "primary", "warning", "error";
@each $type in $types {
  .button-#{$type} {
    background: url("images/#{$type}.png");
  }
}

2、字体堆栈管理

$base-font: "Helvetica";
$fallback: sans-serif;
body {
  font-family: #{$base-font}, $fallback;
}

3、拼接媒体查询规则

$breakpoint: "screen and (min-width: 768px)";
@media #{$breakpoint} {
  .container {
    width: 80%;
  }
}

五、注意事项

1. 引号保留规则：

   • 编译为 CSS 时，Sass 会尽量保留原始引号形式。

   • 若字符串包含空格或特殊字符（如 :、/），编译时会自动添加引号：

     $url: url(image.jpg); // 编译为 url(image.jpg)（无引号）
     $text: Hello World; // 编译为 "Hello World"（自动加引号）

2. 无引号字符串的限制：

   • 不能直接包含空格或运算符（如 +, -），否则会被解析为其他类型。

   • 示例：font-family: Open+Sans; ❌（需用引号包裹或转义空格）。

3. 运算符空格：

   • 拼接时 + 两侧需保留空格，否则会被视为字符串一部分：

     $wrong: "Hello"+"Sass"; // "Hello+Sass"（非预期结果）
     $right: "Hello" + "Sass"; // "Hello Sass"

六、字符串与 CSS 原生值的区别

特性	Sass 字符串	CSS 原生值
引号处理	支持动态操作（如插值）	静态文本，无逻辑处理
变量支持	可嵌入变量和表达式	仅静态值
函数支持	支持字符串函数（如截取）	无内置函数

---

掌握 Sass 字符串类型，可以更灵活地处理动态类名、资源路径、字体堆栈等场景，提升代码的可维护性和复用性！ 🎯

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24