Sass 插值不起作用

Posted 2023-03-06

【中文标题】Sass 插值不起作用

【英文标题】：Sass interpolation doesn't work

【发布时间】：2017-09-19 10:19:54

【问题描述】：

如何在 url 中转义变量？似乎 this 和 this 变体不起作用

@include image("R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=")

@mixin image($base64)
    background: url(data:image/gif;base64,#$base64) //this is line N
    //background: url("data:image/gif;base64,#$base64")

（第 N 行：属性只允许在规则、指令、mixin 中使用 包括，或其他属性。）

我试过 sass 3.4.22 和 3.5.0-rc.1

【参考方案1】：

错误消息告诉您background 属性需要由指定选项之一包装。

@mixin image($base64)
  background: url(data:image/gif;base64,#$base64)

.class
  @include image("R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=")

编译成

.class 
  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=);

使用 SassMeister 和 Sass v3.4.21。我不得不改变 mixin 定义的顺序和它的使用来使编译工作。我不知道这是否只是一个编译器的事情，它可能对你有用。