在前端开发中，我们经常需要生成一些基于不同参数的动态 class 名称，以便应用特定的样式。SASS 提供了一种称为插值的功能，可以轻松创建这样的 class 名称。
SASS 插值
SASS 中的插值是一种将变量和字符串组合在一起的技术。在插值的开始和结尾处使用 #{}，中间使用变量或字符串。例如：
$color: red;
span.#{$color} {
color: $color;
}在这个例子中，我们将变量 $color 值设置为红色，并将其插入到 .red class 中。当编译 SASS 时，将生成以下 CSS：
span.red {
color: red;
}通过这种方式，我们可以轻松地根据需要动态生成 class 名称。
动态生成 class 名称
在实际项目中，我们经常需要动态生成 class 名称。以下是一个示例，其中根据不同设备尺寸创建类名：
-- -------------------- ---- -------
------------- -
-------- -------
------- ------
------- -----
--
----- ------------ ----- -- ------------ -
--------------------- -
---------- ------
-
-在上面的示例中，我们定义了一个名为 $breakpoints 的映射，其中包含各个设备尺寸的名称和值。然后使用 @each 循环遍历映射中的每个键值对，并创建类名 .width-[breakpoint]。插值 #{} 将此变量值插入类名称中，并应用相应的样式。
例如，如果将 $breakpoints 映射更改为：
$breakpoints: ( desktop: 1200px, tablet: 900px, mobile: 600px );
将生成以下 CSS：
-- -------------------- ---- ------- -------------- - ---------- ------- - ------------- - ---------- ------ - ------------- - ---------- ------ -
结论
通过使用 SASS 的插值功能，我们可以轻松动态生成 class 名称。这提供了灵活性和可重用性，并使样式代码更加简洁和易于维护。在实际项目中，了解如何使用 SASS 创建动态 class 名称是一项非常有用的技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677590f36d66e0f9aaf97987