Sass 插值语法

学习使用 #{} 插值语法在选择器、属性名和字符串中嵌入变量。 · 难度：入门 · +15XP

插值语法简介

插值（Interpolation）是 Sass 中强大的功能，允许你在选择器、属性名、属性值以及字符串中嵌入变量或表达式。语法为 #{$variable}。

在选择器中使用

$prefix: 'custom';
.#{$prefix}-button {
  padding: 10px;
}
// 编译为 .custom-button { padding: 10px; }

在属性名中使用

$side: top;
.border-#{$side} {
  border-#{$side}: 1px solid black;
}

在字符串中使用

$name: 'primary';
$value: #3498db;
.alert-#{$name} {
  background-color: #{$value};
}

与引号的交互

实际案例

$sizes: (small: 12px, medium: 16px, large: 20px);
@each $name, $size in $sizes {
  .text-#{$name} {
    font-size: $size;
  }
}

练习提示

使用插值生成一系列工具类，例如 .mt-10、.mb-20，其中 mt 表示 margin-top，数字表示像素值。