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：后无效CSS “[...数据类型=”：预期标识符或字符串，是“＃{$图标}]跨度{ “（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看到：

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"]将被正确编译。但由于某些原因，如果您使用插值，则必须引用它。