插值语法类似于 JavaScript 中的模板字符串（Template Strings）${Value}，但在 Sass 中，插值语法只能用于字符串中。

在 Sass 中，插值（Interpolation） 是一种通过 #{} 语法将变量、表达式或动态内容嵌入到字符串、选择器、属性名等位置的机制。它可以让代码更灵活地生成动态 CSS。

插值语法基本形式

#{expression}

• expression 可以是变量、运算、函数调用等
• 作用：将表达式的结果转换为字符串，并嵌入到目标位置

核心使用场景

1. 动态生成选择器

当需要将变量嵌入选择器（如类名、ID）时，必须使用插值：

$theme: "dark";
$element: "header";

.#{$theme}-#{$element} {
  // 生成 .dark-header
  color: white;
}

2. 动态生成属性名

在属性名中使用变量时：

$direction: "margin-top";

.#{$direction} {
  #{$direction}: 20px; // 生成 margin-top: 20px
}

3. 字符串内嵌入变量

当变量需要嵌入字符串的中间时：

$size: 14;
$font: "Arial";

body {
  font: #{$size}px/#{$size * 1.5}px #{$font}; // 生成 font: 14px/21px Arial
}

4. 在媒体查询中使用

动态生成媒体查询条件：

$breakpoint: 768;

@media (min-width: #{$breakpoint}px) {
  .container {
    width: 90%;
  }
}

5. 注释中的动态内容

$version: "1.2.0";
/* Current version: #{$version} */

对比：插值 vs 普通变量

场景	正确写法	错误写法
选择器中的变量	.#{$var}	. $var
属性名中的变量	#{$var}: value	$var: value
字符串拼接	"text#{$var}"	"text$var"

高级用法示例

1. 嵌套插值

$icon: "arrow";
$state: "hover";

%#{$icon}-#{$state} {
  // 生成 %arrow-hover
  background-image: url("#{$icon}-#{$state}.svg");
}

2. 与混合（Mixin）结合

@mixin generate-button($type) {
  .button-#{$type} {
    background-color: #{"var(--color-#{$type})"};
  }
}

@include generate-button("primary"); // 生成 .button-primary

3. 数学运算

$columns: 12;

@for $i from 1 through $columns {
  .col-#{$i} {
    width: #{$i * (100% / $columns)};
  }
}

注意事项

1. 作用域限制
   插值内容仅在当前作用域有效，无法穿透嵌套规则

2. 类型转换
   插值会强制将内容转换为字符串，数值运算需谨慎：

   $num: 10;
   width: #{$num}px; // 正确 → width: 10px
   width: $num + px; // 更优 → width: 10px

3. 可读性平衡
   过度使用插值会降低代码可读性，建议在必要时使用

兼容性

• 所有 Sass 版本（Dart Sass、LibSass、Ruby Sass）均支持插值语法
• 旧版 Sass（3.x 以下）对某些复杂插值场景支持有限

通过灵活运用插值语法，可以显著提升 Sass 代码的动态生成能力，实现更高效的样式管理。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24