Less与Sass属性插值：差异与解决方案

CSS属性值可通过变量动态设置。Sass利用@function函数实现动态CSS变量生成，但在Less中直接套用此方法会出错。

Less中的替代方案

Less提供了一种不同的语法来实现类似Sass @function的功能：

立即学习“前端免费学习笔记（深入）”；

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

<code class="less">.color(@token) {
  color: rgb(var(~"--color-@{token}"));
}</code>

其中，~符号用于转义变量名，防止Less将其误认为Less变量。

使用方法：

方法一：直接调用并提取属性值

<code class="less">body {
  background: .color("abc")[color];
}</code>

方法二：先调用函数，再使用返回值

<code class="less">.color(@token) {
  @color: var(~"--color-@{token}");
}

body {
  .color("abcd"); //调用函数
  background: @color; // 使用返回值
}</code>

通过以上方法，即可在Less中实现Sass @function函数的动态CSS变量生成效果。