New issue

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

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

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 · 71 comments

Comments

Projects
None yet
@satazor

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

@chriseppstein

This comment has been minimized.

Member

chriseppstein commented May 21, 2012

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

@satazor

This comment has been minimized.

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.

@chriseppstein

This comment has been minimized.

Member

chriseppstein commented May 21, 2012

That would be helpful.

@satazor

This comment has been minimized.

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.

@StanAngeloff

This comment has been minimized.

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.

@StanAngeloff

This comment has been minimized.

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

This comment has been minimized.

satazor commented May 21, 2012

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

@chriseppstein

This comment has been minimized.

Member

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.

@chriseppstein

This comment has been minimized.

Member

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

This comment has been minimized.

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.

@scottdavis

This comment has been minimized.

Member

scottdavis commented May 31, 2012

would both of you happen to be on windows?

@scottdavis

This comment has been minimized.

Member

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

This comment has been minimized.

satazor commented May 31, 2012

@scottdavis I am on windows and you @StanAngeloff ?

@StanAngeloff

This comment has been minimized.

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
@scottdavis

This comment has been minimized.

Member

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.

@chriseppstein

This comment has been minimized.

Member

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.

@JamyGolden

This comment has been minimized.

JamyGolden commented Jun 4, 2012

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

@JamyGolden

This comment has been minimized.

JamyGolden commented Jun 7, 2012

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

This comment has been minimized.

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

@chriseppstein

This comment has been minimized.

Member

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

This comment has been minimized.

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

@chriseppstein

This comment has been minimized.

Member

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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.

@JamyGolden

This comment has been minimized.

JamyGolden commented Feb 4, 2013

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?

@scottdavis

This comment has been minimized.

Member

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//issues/897#issuecomment-13071624.

@scottdavis

This comment has been minimized.

Member

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");
}
@chriseppstein

This comment has been minimized.

Member

chriseppstein commented May 15, 2013

@acdha how many images are in your sprite?

@chriseppstein chriseppstein reopened this May 15, 2013

@acdha

This comment has been minimized.

acdha commented May 15, 2013

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

@chriseppstein

This comment has been minimized.

Member

chriseppstein commented May 15, 2013

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

@Miw0

This comment has been minimized.

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.

@scottdavis

This comment has been minimized.

Member

scottdavis commented Jun 1, 2013

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

@kabadesu

This comment has been minimized.

kabadesu commented Jun 25, 2013

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

@kabadesu

This comment has been minimized.

kabadesu commented Jun 25, 2013

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

@materliu

This comment has been minimized.

materliu commented Jul 16, 2013

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

@jamesmehorter

This comment has been minimized.

jamesmehorter commented Jul 18, 2013

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

@JamyGolden

This comment has been minimized.

JamyGolden commented Jul 19, 2013

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.

@scottdavis

This comment has been minimized.

Member

scottdavis commented Jul 23, 2013

fixed by #1308

@scottdavis scottdavis closed this Jul 23, 2013

@wdf-project

This comment has been minimized.

wdf-project commented Jan 15, 2014

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 !

@kabadesu

This comment has been minimized.

kabadesu commented Mar 30, 2014

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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: #1077

@mdrobny

This comment has been minimized.

mdrobny commented Apr 18, 2014

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

@rickdoesburg

This comment has been minimized.

rickdoesburg commented Aug 12, 2015

@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

@intellix

This comment has been minimized.

intellix commented Aug 15, 2015

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

@azharuddin540

This comment has been minimized.

azharuddin540 commented Nov 13, 2017

Hello..!!

Please guy's keep relative_asset = true in your config.rb file . Then stop the server and restart compilation using compile watch it will work.

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