SCSS Map won't compile in Compass [duplicate]

Question

This question already has answers here:

Is Sass 3.3 compatible with Compass? (3 answers)

Closed 8 years ago.

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;
  }
}

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;
}

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?

Answer 1

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.)

Install the latest beta version of Compass:

gem install compass --pre

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

Answer 2

What versions of Compass/Sass are you using? Maps are new in Sass 3.3, which is only supported by the Compass 1.0 pre-release. gem install compass --pre to get the latest.