Sass 插值问题

Question

我正在尝试使用插值（Saas 3）访问属性，但出现错误。

    @each $icons in myPic1, myPic2 {
        [data-type=#{$icons}] span {
        background: url("/path/to/#{$buttons}.png") no-repeat scroll 50% 50%;}
    }

执行错误：错误：命令失败：（sass）：96：“... [data-type =”：预期标识符或字符串后无效的CSS，是“#{$icons}] span {”（Sass::SyntaxError）

在这种情况下我如何访问属性？

Answer 1

如果您用双引号将插值括起来，它将起作用：

@each $icons in myPic1, myPic2 {
  [data-type="#{$icons}"] span {
  background: url("/path/to/#{$buttons}.png") no-repeat scroll 50% 50%;}
}

我不知道为什么。在 CSS 中，字符串可以加引号或不加引号。正如您在这篇关于 CSS 字符串中引号的有趣文章中所见：

因此，CSS 中有效的不带引号的属性值是任何非空字符串的文本字符串，由转义字符和/或完全匹配 /[-_\u00A0-\u10FFFF]/ 的字符组成，并且不以数字或两个连字符或一个连字符后跟一个数字。

因此，您使用的值是没有引号的正确字符串。

SASS 也接受两种类型的字符串，带引号的和不带引号的。[data-type=myPic1]并且[data-type="myPic2"]都将被正确编译。但是出于某种原因，如果您使用插值，则必须引用它。