[data=value]中的SASS字符串插值/转义

我想在SASS中构建一个非常简单的东西： 有一个颜色字符串

$my color

，我想将其插入css

[数据背景]

属性中，以便将其用作：

我尝试了几种方法将颜色字符串作为字符串包含到数据属性中，因此 结果css如下所示：

[data-background="red"]{
    // ...
}

测试1：插值

$my-color: "red";

[data-background="#{$my-color}"] {
    background: red;
}

结果:

[data-background=red] {
  background: red;
}

[data-background='"red"'] {
  background: red;
}

测试2：逃逸

$my-color: "red";

[data-background="\"#{$my-color}"\"] {
    background: red;
}

结果:

[data-background=red] {
  background: red;
}

[data-background='"red"'] {
  background: red;
}