Question

我已经编写了一个SCSS地图变量和一个@each循环来为文件下载链接分配不同的图标，如下所示。

$file-icons: (
"application/vnd.ms-excel": "../images/ico-excel.png",
"application/pdf": "../images/ico-pdf.png",
"image/tiff": "../images/ico-img.png",
"image/gif": "../images/ico-img.png",
"image/png": "../images/ico-img.png",
"image/jpeg": "../images/ico-img.png",
"application/x-shockwave-flash": "../images/ico-flash.png",
"audio/mpeg": "../images/ico-audio.png"
);

@each $file in $file-icons {
  img[title="#{nth($file, 1)}"] + a:hover {
    background: url("#{nth($file, 2)}") right top no-repeat;
  }
}

当我在Sassmeister上测试时，它完全符合我的预期：

img[title="application/vnd.ms-excel"] + a:hover {
  background: url("../images/ico-excel.png") right top no-repeat;
}

img[title="application/pdf"] + a:hover {
  background: url("../images/ico-pdf.png") right top no-repeat;
}

img[title="image/tiff"] + a:hover {
  background: url("../images/ico-img.png") right top no-repeat;
}

img[title="image/gif"] + a:hover {
  background: url("../images/ico-img.png") right top no-repeat;
}

img[title="image/png"] + a:hover {
  background: url("../images/ico-img.png") right top no-repeat;
}

img[title="image/jpeg"] + a:hover {
  background: url("../images/ico-img.png") right top no-repeat;
}

img[title="application/x-shockwave-flash"] + a:hover {
  background: url("../images/ico-flash.png") right top no-repeat;
}

img[title="audio/mpeg"] + a:hover {
  background: url("../images/ico-audio.png") right top no-repeat;
}

我在这个项目中使用Compass。当我使用compass compile时，我收到以下错误。

user@machine:~/project$ compass compile
    error sass/style.scss (Line 2 of sass/_partial.scss: Invalid CSS after "...n/vnd.ms-excel"": expected ")", was ": "../images/ic...")
   create stylesheets/style.css

我不确定导致此错误的原因。它可能与Sass的新地图有关，也许Compass还没有完全支持它？

Answer 1

当前稳定版的Compass（版本0.12.2）于2012年6月发布，因此它不支持Sass v3.3.0的新地图功能。（Sassmeister目前正在使用Compass的v1.0.0.alpha18，这就是你的Sass在那里编译的原因。）

安装Compass的最新测试版：

gem install compass --pre

版本1.0.0.alpha.19（2014年3月）。

Answer 2

您使用的是什么版本的Compass / Sass？地图是Sass 3.3中的新功能，只有Compass 1.0预发布版才支持。 gem install compass --pre获取最新信息。

SCSS Map不会在Compass中编译

2 个答案: