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=": 预期的标识符或字符串，为 "#{$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 中，字符串可以被引用或不被引用。正如您在this interesting article about quotes in strings in CSS 中看到的：

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

所以您使用的值是不带引号的正确字符串。

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