在 Less 中，我们可以使用 interpolate() 函数进行插值运算，这种运算方式可以帮助我们在编写 CSS 样式时更加灵活，更加方便。
什么是插值运算？
插值运算指的是将一个字符串中的某个部分替换成另一个字符串的操作。在 Less 中，我们可以使用插值运算符 ${} 来表示插值运算。
如何在 Less 中使用 interpolate() 函数？
interpolate() 函数的语法如下：
interpolate(string)
其中，string 表示需要进行插值运算的字符串。
下面是一个简单的示例：
@name: "world";
.content::before {
content: "Hello, @{name}!";
content: interpolate("Hello, #{@{name}}!");
}在上面的代码中，我们定义了一个变量 @name，然后使用插值运算符 @{name} 将其插入到了字符串中。在 interpolate() 函数中，我们使用插值运算符 #{} 将变量 @name 插入到了字符串中。
插值运算的应用场景
插值运算在 Less 中有很多应用场景，下面是一些常见的场景：
1. 定义 mixin
我们可以使用插值运算符来定义 mixin，这样可以让 mixin 更加灵活。
-- -------------------- ---- ------- ----------------------- - ---------------------- -------- ------------------- -------- -------------- -------- - ---- - -------------------- - ---------- - -------------------- -
在上面的代码中，我们定义了一个 border-radius 的 mixin，接着使用插值运算符将参数 @radius 插入到了样式中，这样我们就可以根据需要定义不同的圆角半径。
2. 定义选择器
我们可以使用插值运算符来定义选择器，这样可以让选择器更加灵活。
@prefix: ".box";
@suffix: "-small";
@selector: interpolate("@{prefix}@{suffix}");
@{selector} {
width: 100px;
height: 100px;
}在上面的代码中，我们定义了一个选择器的前缀和后缀，然后使用插值运算符将它们插入到了 @selector 变量中，最后使用 @selector 变量来定义样式。
3. 定义类名
我们可以使用插值运算符来定义类名，这样可以让类名更加灵活。
@prefix: "box-";
@suffix: "small";
.box-@{suffix} {
width: 100px;
height: 100px;
}在上面的代码中，我们定义了一个类名的前缀和后缀，然后使用插值运算符将它们插入到了类名中，最终定义了一个名为 box-small 的类。
总结
使用 interpolate() 函数进行插值运算可以让我们在编写 Less 样式时更加灵活、更加方便。在实际开发中，我们可以根据需要灵活运用插值运算符，让样式更加易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f7e763d10417a22234ff56