Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Sprites are compiled in every call to sprite #897

Closed
satazor opened this Issue May 21, 2012 · 70 comments

Comments

Projects
None yet

satazor commented May 21, 2012

When one wants to use advanced functions like sprite/sprite-url/sprite-position, those functions GENERATE the sprite every single time they are present.

Lets say that I have a sprite of the common folder:

$common: sprite-map("common/*.png")

Then use it like this:

background: sprite($common, image1);
/* ....*/
background: sprite($common, image2);
/* ....*/
background: sprite($common, image3);

This will compile the common sprite 3 times.. When one has a folder with many images this results in very high compilation times.

I've made a dirty fix to fix this, please see: https://github.com/satazor/compass/blob/stable/lib/compass/sass_extensions/sprites/engines/chunky_png_engine.rb

Owner

chriseppstein commented May 21, 2012

That's very strange. It shouldn't happen.

satazor commented May 21, 2012

Thats what I though but that's whats happening..
I'm doing compass compile main.scss to compile my project (main.scss has all the imports).
I can take a screenshot so you can see the log messages compass is producing.

Owner

chriseppstein commented May 21, 2012

That would be helpful.

satazor commented May 21, 2012

Please see: http://cl.ly/2g3F023M0G1y3V0i3p24
For example, if i comment all the uses of sprite($common, ..) and leave it only 1 time, there is only one "created" related to the common sprite.

Contributor

StanAngeloff commented May 21, 2012

I was also wondering if this was a 'feature' or a bug, it happens on my projects as well when sprite-map is used.

Contributor

StanAngeloff commented May 21, 2012

Take the following configuration:

├── config.rb
├── default.scss
└── images
    └── icons
        ├── no.png
        └── yes.png

you get:

% cat default.scss
$icons: sprite-map('icons/*.png');

.yes { width: sprite-width($icons, yes); height: sprite-height($icons, yes); }
.no  { width: sprite-width($icons, no);  height: sprite-height($icons, no);  }
% compass compile --force
   create images/icons-s45c62b77b2.png
   remove images/icons-s45c62b77b2.png
   create images/icons-s45c62b77b2.png
   remove images/icons-s45c62b77b2.png
   create images/icons-s45c62b77b2.png
   remove images/icons-s45c62b77b2.png
   create images/icons-s45c62b77b2.png
   create default.css 

Here is an archive with a minimal test case. Hope this helps.

satazor commented May 21, 2012

exactly @StanAngeloff thats what is happening, thank you for doing a good test case.

Owner

chriseppstein commented May 21, 2012

The force option, causes sprites to be regenerated. You may find compass clean && compass compile to be a more efficient choice for right now, in theory, they should only be forced once in a compilation run.

We'll leave this bug open for now.

Owner

chriseppstein commented May 21, 2012

@satazor but I don't see --force in your example. So I think there's another root cause here.

satazor commented May 21, 2012

@chriseppstein with --force its the same thing, sprites are compiled more than 1 time.. even with clean & compile.
I can post a screenshot with it if you want me to.

Owner

scottdavis commented May 31, 2012

would both of you happen to be on windows?

Owner

scottdavis commented May 31, 2012

when i run @StanAngeloff example it only is creating one sprite for me on OSX lion

[sdavis@scotts-imac:issues_897 (master)]$ compass compile
   create images/icons-s45c62b77b2.png
unchanged images/icons-s45c62b77b2.png
unchanged images/icons-s45c62b77b2.png
unchanged images/icons-s45c62b77b2.png
   create default.css 
[sdavis@scotts-imac:issues_897 (master)]$ compass -v
Compass 0.12.1 (Alnilam)
Copyright (c) 2008-2012 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass
[sdavis@scotts-imac:issues_897 (master)]$ 

satazor commented May 31, 2012

@scottdavis I am on windows and you @StanAngeloff ?

Contributor

StanAngeloff commented May 31, 2012

Chris pointed out in my case it was the --force causing trouble, so probably best to ignore my report.

OS details:

[~] % uname -a
Linux stan-inspiron 3.2.0-24-generic #39-Ubuntu SMP Mon May 21 16:52:17 UTC 2012 x86_64 x86_64 x86_64 GNU/Linux
Owner

scottdavis commented May 31, 2012

Im starting to think that downstream some place we accepted a PR that didn't use OS agnostic functions and thats why we have a few weird windows bugs that have todo with file mtime but, that is just a gut feeling.

Owner

chriseppstein commented Jun 4, 2012

I really don't think this is affecting most people. It's certainly not reproducible on my projects. Can you verify that the modification times on your source images are not somehow set in the future? Compass would only ever re-generate these if the source images' mtime is newer than the generated file.

Hey, I'm getting this problem too. I'm using sprite-url() for pseudo elements.
http://imageshack.us/photo/my-images/140/compassi.png/

I've got this:
$mainMap: sprite-map("main/*.png"); // contains icons/new.png among others.
@include sprites($mainMap, sprite-names($mainMap), true, true);

If I add something like #whatever { background: $mainMap; }, compass creates a new sprite for that for some reason. So anything referencing $mainMap before will be looking at the wrong image.

This is happening for me on Linux and Windows..

satazor commented Jun 11, 2012

i'm glad to see that i am not the only one having this issue, hope it gets fixed soon because its very very slow if a project has some considerable amount of sprites

Owner

chriseppstein commented Jun 11, 2012

If any of you are rubyists, it'd be great if you could dig in and identify what is going on. I cannot reproduce this.

satazor commented Jun 11, 2012

@chriseppstein actually i made a fork to temporarily fix this issue.. all my team is using my fork. Though it was the first time i've touched ruby therefore it was a dirty fix..

Owner

chriseppstein commented Jun 11, 2012

@satazor I saw that patch, it's not a proper fix, just a work-around. As I said, there's no good reason for this to happen unless one of three situations are true:

  1. force is enabled
  2. the modification time for a source image is newer than that of the generated file.
  3. the parameters to the spritemap change across different use cases (this can be disabled by setting $<map>-clean-up to false)

So either there's another case that I can't see in the code, or there's an OS-specific issue, or there's user error. If you have a small project that exhibits this issue zip it up and email it to me (chris@eppsteins.net) and I'll try to reproduce the issue. Last time I did this for someone, the problem was #3 (user error).

satazor commented Oct 21, 2012

@chriseppstein After some investigation this only happens if we specify a file in the compass compile command.

unless arguments.empty?
  parser.options[:sass_files] = arguments.dup
  parser.options[:force] = true

Thing is that, with force flag true, every single sprite is being cleared/recompiled when a new image is declared as being part of it

rkjaer commented Nov 2, 2012

Happens for a project that I'm working on as well. On a Mac, running Compass version 0.12.2.

For every call to the sprite() function the entire sprite-map is regenerated. The sprite-map is, of course, stored in a variable. All source file modification dates are checked and none of them is set to some future date.

Saturate commented Nov 9, 2012

I have this exact problem on Windows Compass Version: 0.12.2. Worse yet, if I run with --force it just keeps looping forever. I can confirm it happens with every call to a mixin that uses a sprite map.

mrzmyr commented Dec 14, 2012

Is there any workaround for this ? Have this too, by calling compass compile with a file to compile the project path.

This is quite a big problem since it stops me from using Compass sprites for pseudo elements. This happens for me without exception and regardless of the OS - as far as I can tell.

Example of problem:
Link: http://css-plus.com/examples/2013/02/compass-sprite-problem/
Download: https://www.dropbox.com/s/9jtornjlybxjh9v/compass-sprite-problem.zip

Note: The http_path within the config will obviously need to change.

@chriseppstein do you get the same problem when running that?

Owner

scottdavis commented Feb 4, 2013

Out of curiosity why are you creating the sprite twice? you either use the
import method or you use the sprite-map method not both.

On Mon, Feb 4, 2013 at 6:18 AM, Jamy notifications@github.com wrote:

This is quite a big problem since it stops me from using Compass sprites
for pseudo elements. This happens for me without exception and regardless
of the OS - as far as I can tell.

Example of problem:
Link: http://css-plus.com/examples/2013/02/compass-sprite-problem/
Download:
https://www.dropbox.com/s/9jtornjlybxjh9v/compass-sprite-problem.zip

Note: The http_path within the config will obviously need to change.

@chriseppstein https://github.com/chriseppstein do you get the same
problem while running that?


Reply to this email directly or view it on GitHubhttps://github.com/chriseppstein/compass/issues/897#issuecomment-13071624.

Owner

scottdavis commented Feb 4, 2013

After more investigation I found that the projects config.rb had a corrupted / invalid mtime. After i fixed that and made a few refactors to the code you added I am not seeing the double compile issue against the latest master.

@charset "UTF-8";

@import "compass/css3";

// Begin sprites
$sprite_main: sprite-map("main/*.png");
i { display: inline-block; *display: inline; zoom: 1; }


// If you remove the CSS following this text, the other sprites 
// will magicall appear after compass compiles this .scss file
.special-icon {
    content: '';
    display: inline-block;
    background: $sprite_main;
    background-position: sprite-position($sprite_main, "btn-start");
    height: sprite-height($sprite_main, "btn-start");
    width: sprite-width($sprite_main, "btn-start");
}

I turned .special-icon into a normal class for illustration purposes to simplify this problem. I need to create the sprite twice for pseudo element since I can't add classes to pseudo elements - unless you guys know of a better way to do it?

As for the corrupt/invalid mtime, how would I rectify that? The config.rb was created with via $ compass create in Windows.

@scottdavis I used the .scss you added above and it gave me a css output of:

/* line 7, ../scss/main.scss */
i {
  display: inline-block;
  *display: inline;
  zoom: 1;
}

/* line 12, ../scss/main.scss */
.special-icon {
  content: '';
  display: inline-block;
  background: url('/examples/2013/02/compass-sprite-problem/img/main-seb23469c6a.png');
  background-position: 0 -68px;
  height: sprite-height(url('/examples/2013/02/compass-sprite-problem/img/main-seb23469c6a.png'), "btn-start");
  width: sprite-width(url('/examples/2013/02/compass-sprite-problem/img/main-seb23469c6a.png'), "btn-start");
}

Am I doing something wrong?

Hi,

I am also getting this problem on Windows running Compass 0.12.2.

compassSnap

For me it seems to rebuild the sprite differently every time which makes my images not display properly like so:

brokenSprite

Here is my code:

sassExample

@include all-icoSprite-sprites(true);

actually produces different values to

$info: sprite($icoSprite-map, info);

Owner

scottdavis commented Feb 8, 2013

@JamyGolden use the latest alpha gem install compass --pre

@scottdavis I just did what you suggested and I get this:

[Listen warning]:
Missing dependency 'wdm' (version '> 0.0.3')!
Please run the following to satisfy the dependency:
gem install --version '
> 0.0.3' wdm

Also I am linking to blueprint buttons like so:

@import "blueprint/buttons";

This is now throwing an error:

error Content/SASS/englandMobile.scss (Line 97: File to import not found or unreadable: blueprint/buttons.

I tried running both:

gem install --version '~> 0.0.3' wdm

and

gem install --version

neither are valid statements or work.

Owner

scottdavis commented Feb 8, 2013

@LukeHill you will need to install the gem compass-blueprint we removed blueprint from the core in this new release

@scottdavis I ran this:

gem install compass-blueprint

It downloaded and installed like so:

Fetching: compass-blueprint-0.0.1.gem (100%)
Successfully installed compass-blueprint-0.0.1
1 gem installed
Installing ri documentation for compass-blueprint-0.0.1...
Installing RDoc documentation for compass-blueprint-0.0.1...

But I still get the error below when doing a compass watch.

>>> Compass is watching for changes. Press Ctrl-C to Stop.
    error Content/SASS/englandMobile.scss (Line 97: File to import not found orunreadable: blueprint/buttons.
Load paths:
  c:/projects/europe/dtl.europe/Content/SASS
  C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-0.13.alpha.2/frameworks/compass/stylesheets
  Compass::SpriteImporter)
identical Content/CSS/englandMobile.css
[Listen warning]:
  Missing dependency 'wdm' (version '~> 0.0.3')!
  Please run the following to satisfy the dependency:
    gem install --version '~> 0.0.3' wdm

  For a better performance, it's recommended that you satisfy the missing dependency.
  Compass is polling for changes

Thanks for your help

Owner

scottdavis commented Feb 8, 2013

you need to require 'compass-blueprint' in your config file or use bundler. we are getting out of scope of this issue if you need more help with upgrading lets move the discussion to the google group.

Nice one thanks, sorry I did not mean to defer from the subject of this feed.

Getting back on subject, updating by running:

gem install compass --pre

I am still getting the same problem with my sprites:

  For a better performance, it's recommended that you satisfy the missing dependency.
  Compass is polling for changes
     info Content/SASS/Mobile/Shared/_icons.scss was modified
   remove Content/Assets/mobile/england/icoSprite-sa9c5502524.png
   create Content/Assets/mobile/england/icoSprite-sbd6b469b90.png
   remove Content/Assets/mobile/england/icoSprite-sbd6b469b90.png
   create Content/Assets/mobile/england/icoSprite-seee5a05a60.png
unchanged Content/Assets/mobile/england/icoSprite-seee5a05a60.png
unchanged Content/Assets/mobile/england/icoSprite-seee5a05a60.png
unchanged Content/Assets/mobile/england/icoSprite-seee5a05a60.png
unchanged Content/Assets/mobile/england/icoSprite-seee5a05a60.png
unchanged Content/Assets/mobile/england/icoSprite-seee5a05a60.png
unchanged Content/Assets/mobile/england/icoSprite-seee5a05a60.png
overwrite Content/CSS/englandMobile.css
identical Content/CSS/fonts.css
     info Content/SASS/Mobile/Shared/_icons.scss was modified
Owner

scottdavis commented Feb 8, 2013

@lukehillonline see my post above you are using both the @import way of creating a sprite and the manual sprite-map way use one or the other.

Hey, so is it not possible to have both at the same time then? I have removed the @import method but the sprite still gets recreated on every request of the sprite() method.

The following code produces 7 creations of the sprite:

$icoSprite-map: sprite-map("mobile/england/icoSprite/*.png");

$close: sprite($icoSprite-map, close);
$guides-video: sprite($icoSprite-map, guides-video);
$guides: sprite($icoSprite-map, guides);
$hoverpoints: sprite($icoSprite-map, hoverpoints);
$info: sprite($icoSprite-map, info);
$input: sprite($icoSprite-map, input);
$inputerror: sprite($icoSprite-map, inputerror);

Perhaps I am doing something wrong or my methods are not quite right, what I am trying to achieve is to create the sprite using the @import method (meaning compass only creates the sprite once) and use @include to output all my CSS background positions, but at the same time I want to store the background positions of each item in the sprite to a variable for use throughout my SASS. Is that possible? Thanks.

I have now solved my issue, I am now using @include icoSprite-sprite(input); to include the background position of the input part of my sprite where ever I need. This does not cause the sprite to be recreated and works very well.

Thanks all for your help.

using --pre which is 0.13.alpha.2 and it seems "compass watch" isn't recompiling when I make changes.
Even still, this is the output I'm getting when something changes anyway:

unchanged media/units/small-s334ee91009.png
unchanged media/units/small-s334ee91009.png
unchanged media/units/small-s334ee91009.png
unchanged media/units/small-s334ee91009.png
unchanged media/units/small-s334ee91009.png
unchanged media/units/small-s334ee91009.png
unchanged media/units/small-s334ee91009.png
unchanged media/units/small-s334ee91009.png
unchanged media/units/small-s334ee91009.png
unchanged media/units/small-s334ee91009.png
unchanged media/units/small-s334ee91009.png
unchanged media/units/small-s334ee91009.png
unchanged media/units/small-s334ee91009.png
unchanged media/units/small-s334ee91009.png
unchanged media/units/small-s334ee91009.png
unchanged media/units/small-s334ee91009.png
etc (about 40 more)
overwrite css/kingdom.css 

My Compass Sprite code (from units-small) looks like:

$smallUnits-sprite: sprite-map("units/small/*.png");

.unit-small {
    display: block;
    @include sprite-dimensions($smallUnits-sprite, u-1-1);
}

.u-1-0  { background: sprite($smallUnits-sprite, u-1-0) no-repeat; }
.u-1-1  { background: sprite($smallUnits-sprite, u-1-1) no-repeat; }
.u-1-2  { background: sprite($smallUnits-sprite, u-1-2) no-repeat; }
.u-1-3  { background: sprite($smallUnits-sprite, u-1-3) no-repeat; }
.u-1-4  { background: sprite($smallUnits-sprite, u-1-4) no-repeat; }
.u-2-0  { background: sprite($smallUnits-sprite, u-2-0) no-repeat; }
.u-2-1  { background: sprite($smallUnits-sprite, u-2-1) no-repeat; }
.u-2-2  { background: sprite($smallUnits-sprite, u-2-2) no-repeat; }
.u-2-3  { background: sprite($smallUnits-sprite, u-2-3) no-repeat; }
.u-2-4  { background: sprite($smallUnits-sprite, u-2-4) no-repeat; }
.u-3-0  { background: sprite($smallUnits-sprite, u-3-0) no-repeat; }
.u-3-1  { background: sprite($smallUnits-sprite, u-3-1) no-repeat; }
.u-3-2  { background: sprite($smallUnits-sprite, u-3-2) no-repeat; }
.u-3-3  { background: sprite($smallUnits-sprite, u-3-3) no-repeat; }
.u-3-4  { background: sprite($smallUnits-sprite, u-3-4) no-repeat; }
etc (lots more)

Getting spammed to death when I change as much as the colour of some text. Seems to absolutely destroy performance

mehano commented Feb 21, 2013

Also having this issue while in Windows. Seems to only happen as @scottdavis says when you use @import sprites and also using @include sprites mixin.

So after refactoring to not use the @include sprites mixin and use the @import statement only, it stops the unwanted behavior.

@scottdavis scottdavis closed this Feb 21, 2013

jnicol commented Mar 1, 2013

Sorry to comment on a closed issue. I was encountering the same problem, but was able to resolve it using an approach not mentioned here already.

My example code is:

$icons: sprite-map("icon/*.png");
.pin {
  background: sprite($icons, pin);
}
.pin2 {
  background: sprite($icons, pin);
}

When compiling using compass compile assets/sass/style.scss the result was:

compass compile assets/sass/style.scss
   remove assets/images/icon-sfc439a1da2.png
   create assets/images/icon-sfc439a1da2.png
   remove assets/images/icon-sfc439a1da2.png
   create assets/images/icon-sfc439a1da2.png
overwrite assets/css/style.css

As you can see, the sprite map is being created twice.

However, when I compile using compass compile thing work as expected:

compass compile
   create assets/images/icon-sfc439a1da2.png
unchanged assets/images/icon-sfc439a1da2.png
overwrite assets/css/style.css

In this case, the sprite map is created only once.

The difference between these two approaches is of course that in the first example I compile a single .scss file, whereas in the second example I compiled the entire project. If I were to guess, when compiling a single stylesheet, the --force flag is automatically added?

I've only been using Compass a short while, so for all I know this is expected behaviour, but I'm mentioning it here in case a) it actually IS a bug or b) it helps someone else resolve issues they are having.

jnicol commented Mar 1, 2013

Regarding my comment above, it seems this issue was addressed by pull request #1187

I had the same issue, I was copying images from my Windows machine into a Unix-like one and apparently the timestamps were messed up (like @chriseppstein mentioned).

I normalized the files' timestamps (by doing touch <filename>) and that worked.

UPDATE: also make sure the images are not executable and are read/write accessible.

Im also having this issue, where the sprite even without changes in it's composition get's listed multiple times on my compass command line logging.

Im on the latest compass --pre version.

How did you guys solved this?

acdha commented May 15, 2013

I'm seeing unchanged behaviour using the latest --pre version:

$ time -p compass compile
unchanged css/main.scss
real 0.86
$ touch css/main.scss
$ time -p compass compile
unchanged img/sprites/homepage-s5477cd65b0.png
…
identical css/main.css 
real 6.87

One other note: the sprites are regenerated each time they're referenced – I have a main.min.scss file which simply imports main.scss and if I simply compile both in one run it will show the sprite check progress twice and take twice as long.

Owner

chriseppstein commented May 15, 2013

@acdha how many images are in your sprite?

@chriseppstein chriseppstein reopened this May 15, 2013

acdha commented May 15, 2013

Roughly 50 total images for 10 sprites. Total is around 300Kb for source & output

Owner

chriseppstein commented May 15, 2013

@acdha can you email me an archive of a compass project that reproduces this issue? chris@eppsteins.net

Miw0 commented May 27, 2013

I got the same issue like @intellix but in a slightly different way..
I created a file _icon.scss which contains 2 variables and 1 mixin and I am including it at the top of my screen.scss file.

Content of the _icons.scss file:

$icon-map-layout: smart !default;
$icon-map: sprite-map("icons/*.png") !default;

@mixin icon($image-name) {
    width: image-width(sprite-file($icon-map, $image-name));
    height: image-height(sprite-file($icon-map, $image-name));
    background: sprite($icon-map, $image-name) no-repeat;
}

(Ah btw, this is not working: $icon-map-layout: smart !default;. It doesn't affect the sprite in any way.)

In my screen.scss file I am using the mixin like so (of course way more often and in different selectors):

* {
    @include icon($image-name);
}

I get the following console output, when compiling.

>>> Compass is polling for changes. Press Ctrl-C to Stop.
>>> Change detected at 16:52:38 to: screen.scss
unchanged clickdummy/pics/icons-saf6ff527d1.png
unchanged clickdummy/pics/icons-saf6ff527d1.png
unchanged clickdummy/pics/icons-saf6ff527d1.png
unchanged clickdummy/pics/icons-saf6ff527d1.png
unchanged clickdummy/pics/icons-saf6ff527d1.png
(about 80 more)
identical clickdummy/style/screen.css

My Gemfile:

ruby '2.0.0'

source 'https://rubygems.org'

gem 'sass', '3.2.7'
gem 'compass', '0.12.2'
gem 'oily_png', '1.1.0'
gem 'zurb-foundation', '3.2.5'
gem 'cssDir2', '1.0.3'

Am I doing something wrong or is this a bug?

I can't update compass, nor Sass because Foundation 3.x uses deprecated Sass functions which will be removed in Sass 3.3. So Foundation 3.x won't work with Sass 3.3 and I don't have the time to upgrade to Foundation 4 which has alot of huge changes.

Owner

scottdavis commented Jun 1, 2013

#1308 should fix this issue if someone wants to verify with their code base

#1308 seems to fix the unchanged sprite issue but introduces a new one.

If I alter the $spacing of my regular sprite from 10px to 20px, it recreates the new sprite as expected... but when I switch the $spacing back to 10px it won't recreate the sprite again.

If I perform the same on my retina sprite from 10px to 20px, it recreates the new sprite as expected... but when I switch back to 10px I get this error:

Errno::EINVAL on line ["28"] of C: Invalid argument - C:/Users/mnuttall/Desktop/sprite-generation/images/C:/Users/mnuttall/Desktop/sprite-generation/images/sprites-retina-sf6d568f650.png

I'm using a modified version of this retina-sprite mixin https://github.com/AdamBrodzinski/Retina-Sprites-for-Compass

I'm happy to send my working files to you if it will help to debug things.

Also, it appears that compass watch hangs every now and then. Hitting Ctrl-C wakes it up.

can I have one method to remove the generate sprites class folder-name preifx:
for example: slice1-btn-add-people to btn-add-people

I can confirm this issue as well using Compass 0.12.2 on Windows 8 w/ Ruby 1.9.3p362 and RubyGems 1.8.24

See my tests here: http://pastie.org/8153078

I've found a way to solve this (for myself at least) if anyone is interested. I've stopped creating a sprite map like this:

$icons: sprite-map('icons/*.png');

I now just create the sprite and define the width/height values with this:

@import "icon/*.png";
@include all-icon-sprites(true);

If I then want to get a specific icon's dimensions/background position within the sprite, I use the following:

.whatever {
    @include icon-sprite(image-name-here); // Gets image background position within sprite
    height: icon-sprite-height(image-name-here); // Gets image height
    width: icon-sprite-width(image-name-here); // Gets image width
}

Hopefully that helps someone.

Owner

scottdavis commented Jul 23, 2013

fixed by #1308

@scottdavis scottdavis closed this Jul 23, 2013

Sorry, it does not work for me.
Before I add this mixin, the sprites compilation was OK. Now, the spritemap generated is empty.

My previous code :

scss :
@import "picto/*.png";
@include all-picto-sprites;

html :
class="picto-logo"

When I add the mixin, my code looks like this :
scss :
@mixin get-sprite($map, $sprite, $repeat: no-repeat, $height: true, $width: true) {
$sprite-image: sprite-file($map, $sprite);
$sprite-map: sprite-url($map);
$sprite-position: sprite-position($map, $sprite);
background: $sprite-map $sprite-position $repeat;
@if $height == true {
$sprite-height: image-height($sprite-image);
height: $sprite-height; }
@if $width == true {
$sprite-width: image-width($sprite-image);
width: $sprite-width; }
}

@import "picto/*.png";
@include all-picto-sprites;
$picto: sprite-map("picto/*.png");
(...)
@media screen and (max-width: 520px) {
.picto-logo_large {
    @include get-sprite($picto, logo);
}
}

Thanks for your help !

Any ETA on this being pulled into the main branch?

I accidentally ran gem update and it got the latest stable version of compass, which still has the "Sprites always recreated" issue. I then tried to uninstall it to get back to this version (compass-0.13.alpha.4.89f9f10.gem). It didn't work.

C:/Ruby200/lib/ruby/2.0.0/rubygems/core_ext/kernel_require.rb:45:in `require': cannot load such file -- sass/script/node (LoadError)
        from C:/Ruby200/lib/ruby/2.0.0/rubygems/core_ext/kernel_require.rb:45:in `require'
        from C:/Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.13.alpha.4.89f9f10/lib/compass/sass_extensions/monkey_patches/browser_support.rb:1:in `<top (required)>'
        from C:/Ruby200/lib/ruby/2.0.0/rubygems/core_ext/kernel_require.rb:45:in `require'
        from C:/Ruby200/lib/ruby/2.0.0/rubygems/core_ext/kernel_require.rb:45:in `require'
        from C:/Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.13.alpha.4.89f9f10/lib/compass/sass_extensions/monkey_patches.rb:2:in `block in <top (required)>'
        from C:/Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.13.alpha.4.89f9f10/lib/compass/sass_extensions/monkey_patches.rb:1:in `each'
        from C:/Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.13.alpha.4.89f9f10/lib/compass/sass_extensions/monkey_patches.rb:1:in `<top (required)>'
        from C:/Ruby200/lib/ruby/2.0.0/rubygems/core_ext/kernel_require.rb:45:in `require'
        from C:/Ruby200/lib/ruby/2.0.0/rubygems/core_ext/kernel_require.rb:45:in `require'
        from C:/Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.13.alpha.4.89f9f10/lib/compass/sass_extensions.rb:9:in `<top (required)>'
        from C:/Ruby200/lib/ruby/2.0.0/rubygems/core_ext/kernel_require.rb:45:in `require'
        from C:/Ruby200/lib/ruby/2.0.0/rubygems/core_ext/kernel_require.rb:45:in `require'
        from C:/Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.13.alpha.4.89f9f10/lib/compass.rb:5:in `block in <top (required)>'
        from C:/Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.13.alpha.4.89f9f10/lib/compass.rb:4:in `each'
        from C:/Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.13.alpha.4.89f9f10/lib/compass.rb:4:in `<top (required)>'
        from C:/Ruby200/lib/ruby/2.0.0/rubygems/core_ext/kernel_require.rb:45:in `require'
        from C:/Ruby200/lib/ruby/2.0.0/rubygems/core_ext/kernel_require.rb:45:in `require'
        from C:/Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.13.alpha.4.89f9f10/bin/compass:20:in `block in <top (required)>'
        from C:/Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.13.alpha.4.89f9f10/bin/compass:8:in `fallback_load_path'
        from C:/Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.13.alpha.4.89f9f10/bin/compass:19:in `<top (required)>'
        from C:/Ruby200/bin/compass:23:in `load'
        from C:/Ruby200/bin/compass:23:in `<main>'

I then followed my old install documentation to get up and running from scratch and that didn't work either (Using Ruby 2.0.0-p195 and DevKit over at http://rubyinstaller.org/).

So now my only option is to use the latest stable version, meaning I'm stuck with compass checking whether my sprite has changed for every image it comes across in my scss files.


Running "compass:compile" (compass) task
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/feedback-s0491c851ce.png
unchanged App/Content/Images/feedback-retina-s47cc2907a7.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/advertising-s1a5643d8a5.png
unchanged App/Content/Images/advertising-retina-sd8b19581a5.png
unchanged App/Content/Images/advertising-s1a5643d8a5.png
unchanged App/Content/Images/advertising-retina-sd8b19581a5.png
unchanged App/Content/Images/advertising-s1a5643d8a5.png
unchanged App/Content/Images/advertising-retina-sd8b19581a5.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
unchanged App/Content/Images/sprites-s6a82c68cbe.png
unchanged App/Content/Images/sprites-retina-s5e5effbdbd.png
overwrite App/Content/Site.css (6.272s)
overwrite App/Content/Style.wp.css (0.624s)
overwrite App/Content/Test.css (0.426s)
Compilation took 7.45s

lmarcon commented Apr 11, 2014

Compass 1.0.0.alpha.19, still experiencing this problem.
We used to call sprite-url() in a mixin to generate sprites for retina displays, so every time we include this mixin the sprite is being regenerated.

We solved by calling sprite-url() just once at the beginning of our mixins partial, and assigning it to a variable used inside the mixin itself.

$sprites : sprite-map("sprites/*.png");
$spriteUrl = sprite-url($sprites);

@mixin ... {
    // use $spriteUrl inside here
    // e.g.: background-image: $spriteUrl;
}

fender commented Apr 16, 2014

I'm also starting to get this error: Errno::ENOENT on line 28 of /Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/sass_extensions/functions/image_size.rb: No such file or directory - /Users/jfender/Documents/Workspace/dmeapp/src/scss/images/base2x-sc8d7ccdb84.png

@mixin all-retina-sprites($map, $map2x) {
  @media (min--moz-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3/2),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5),
    (min-resolution: 1.5dppx) {

    $base-class: sprite-map-name($map);

    .#{$base-class}-all-retina-sprites {
      background-image: sprite-url($map2x);
      @include background-size(ceil(image-width(sprite-path($map2x)) / 2) auto);
    }

    @each $sprite in sprite-names($map) {
      .#{$base-class}-#{$sprite} {
        @extend .#{$base-class}-all-retina-sprites;

        $position: sprite-position($map2x, $sprite);
        background-position: nth($position, 1) nth($position, 2) / 2;
      }
    }
  }
}

@import "base/*.png";
@import "base2x/*.png";

@include all-base-sprites;
@include all-retina-sprites($base-sprites, $base2x-sprites);

lmarcon commented Apr 16, 2014

@fender I had this error using the same mixin, but then I realized that I was missing an image inside one of the two sprites directories. There have to be the same exact filenames in the two base and base2x directories.

fender commented Apr 16, 2014

@lmarcon Thanks for replying. I took a look and unless I am going blind the file names are all exactly the same:

Fenda:images jfender$ cd base
Fenda:base jfender$ ls -la
total 64
drwxr-xr-x  9 jfender  staff   306 16 Apr 14:28 .
drwxr-xr-x  5 jfender  staff   170 16 Apr 14:11 ..
-rw-r--r--@ 1 jfender  staff  2397 16 Apr 14:14 drupal.png
-rw-r--r--@ 1 jfender  staff  1899 16 Apr 14:14 facebook.png
-rw-r--r--@ 1 jfender  staff  2083 16 Apr 14:13 google-plus.png
-rw-r--r--@ 1 jfender  staff  1978 16 Apr 14:13 itunes.png
-rw-r--r--@ 1 jfender  staff  7936 16 Apr 14:28 logo.png
-rw-r--r--@ 1 jfender  staff  2177 16 Apr 14:13 rss.png
-rw-r--r--@ 1 jfender  staff  1996 16 Apr 14:13 twitter.png
Fenda:base jfender$ cd ../base2x/
Fenda:base2x jfender$ ls -la
total 80
drwxr-xr-x  9 jfender  staff    306 16 Apr 14:26 .
drwxr-xr-x  5 jfender  staff    170 16 Apr 14:11 ..
-rw-r--r--  1 jfender  staff   3120 16 Apr 12:54 drupal.png
-rw-r--r--@ 1 jfender  staff   1188 16 Apr 12:58 facebook.png
-rw-r--r--@ 1 jfender  staff   1803 16 Apr 12:59 google-plus.png
-rw-r--r--@ 1 jfender  staff   1337 16 Apr 13:00 itunes.png
-rw-r--r--@ 1 jfender  staff  14880 16 Apr 14:26 logo.png
-rw-r--r--@ 1 jfender  staff   1760 16 Apr 13:00 rss.png
-rw-r--r--@ 1 jfender  staff   1632 16 Apr 12:57 twitter.png

lmarcon commented Apr 16, 2014

@fender Take a look here: http://thewebivore.com/compass-sprites-and-retina-displays-sass/
Basically that error means that compass can't find something. Also check generated_images_dir parameter in your compass.rb config file

fender commented Apr 16, 2014

@lmarcon Thanks for pointing me in the right direction. Looks like even setting the generated_images_dir is not working. There is another issue where other people are having similar problems: chriseppstein#1077

mdrobny commented Apr 18, 2014

@imarcon solution worked for me. Calling sprite-url() only once doesn't lead to double generation.

@lmarcon solution did not work for me, I'm still receiving

unchanged static/img/sprites/icons-sab49c68c98.png
unchanged static/img/sprites/icons-sab49c68c98.png
unchanged static/img/sprites/icons-sab49c68c98.png
unchanged static/img/sprites/icons-sab49c68c98.png
unchanged static/img/sprites/icons-sab49c68c98.png
unchanged static/img/sprites/icons-sab49c68c98.png
unchanged static/img/sprites/icons-sab49c68c98.png
unchanged static/img/sprites/icons-sab49c68c98.png
unchanged static/img/sprites/icons-sab49c68c98.png
unchanged static/img/sprites/icons-sab49c68c98.png
unchanged static/img/sprites/icons-sab49c68c98.png
unchanged static/img/sprites/icons-sab49c68c98.png
unchanged static/img/sprites/icons-sab49c68c98.png
unchanged static/img/sprites/icons-sab49c68c98.png
unchanged static/img/sprites/icons-sab49c68c98.png
unchanged static/img/sprites/icons-sab49c68c98.png
unchanged static/img/sprites/icons-sab49c68c98.png
unchanged static/img/sprites/icons-sab49c68c98.png
unchanged static/img/sprites/icons-sab49c68c98.png
unchanged static/img/sprites/icons-sab49c68c98.png
unchanged static/img/sprites/icons-sab49c68c98.png
unchanged static/img/sprites/icons-sab49c68c98.png
unchanged static/img/sprites/icons-sab49c68c98.png
unchanged static/img/sprites/icons-sab49c68c98.png
unchanged static/img/sprites/icons-sab49c68c98.png
unchanged static/img/sprites/icons-sab49c68c98.png
write static/css-compiled/site.css

Apologies for going off topic. But for anyone still using Compass, I would recommend something like libsass, bourbon and sprity. Libsass pretty much compiles your SASS instantly in comparison and you only create sprites when actually needed. Hope this helps someone :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment