SCSS Map无法在Compass中编译 [英] SCSS Map won't compile in Compass

问题描述

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

I've written an SCSS map variable and an @each loop to assign different icons to file download links, seen below.

$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 ，它的编译完全符合我的预期：

When I test this on Sassmeister, it compiles exactly as I expect:

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编译时，出现以下错误。

I'm using Compass for this project. When I use compass compile, I get the following error.

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

我不确定是什么导致此错误。

I'm not sure what's causing this error. Could it be related to how new maps are to Sass, and maybe Compass doesn't fully support it yet?

推荐答案

当前的方法是否与Sass上的新地图有关，也许Compass尚未完全支持它？稳定版的Compass（版本0.12.2）已于2012年6月发布，因此不支持Sass v3.3.0的新地图功能。 （Sassmeister当前正在使用Compass的v1.0.0.alpha18，这就是您的Sass在那里编译的原因。）

The current stable version of Compass (version 0.12.2) was released in June of 2012, and so it doesn't support the new maps functionality of Sass v3.3.0. (Sassmeister is currently using v1.0.0.alpha18 of Compass, which is why your Sass compiles there.)

安装最新的Compass Beta版本：

Install the latest beta version of Compass:

gem install compass --pre

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

which is version 1.0.0.alpha.19 (March 2014).

这篇关于SCSS Map无法在Compass中编译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！