This question already has an answer here:
- Is Sass 3.3 compatible with Compass? 3 answers
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?