Sass插值问题 [英] Sass interpolation issue

问题描述

我正在尝试通过插值方式访问属性(Saas 3)，但出现错误.

I'm trying to access attribute with interpolation (Saas 3), but get an error.

    @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 =":预期的标识符或字符串，为#{$ icons}] span {"之后的无效CSS(Sass::SyntaxError)

exec error: Error: Command failed: (sass):96: Invalid CSS after "... [data-type=": expected identifier or string, was "#{$icons}] span {" (Sass::SyntaxError)

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

How I can access attributes in that case?

推荐答案

如果插值用双引号引起来，它将起作用:

If you surround your interpolation with double quotes it will work:

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

我不确定为什么.在CSS中，字符串可以带引号或不带引号.正如您在有关CSS中字符串引号的有趣文章中看到的:

I'm not sure why. In CSS, strings can be quoted or unquoted. As you can see in this interesting article about quotes in strings in CSS:

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

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.

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

So values you are using are correct strings without quotes.

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

SASS accepts as well both types of strings, quoted and unquoted. [data-type=myPic1] and [data-type="myPic2"] would be both correctly compiled. But for some reason if you use an interpolation you must quote it.

这篇关于Sass插值问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！