css - Sass插值问题

Question

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

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

exec 错误:错误:命令失败:(sass):96:“... [data-type=”之后的无效 CSS:预期的标识符或字符串，是“#{$icons}] span {”(Sass: :语法错误)

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

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 中看到的那样:

So, a valid unquoted attribute value in CSS is any string of text that is not the empty string, consists of escaped characters and/or characters matching /[-_\u00A0-\u10FFFF]/ entirely, and doesn’t start with a digit or two hyphens or a hyphen followed by a digit.

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

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