Remove The Random String Appended to Sprite Filename with Compass/Sass

Remove the random string appended to sprite filename with Compass/Sass

in your project config file enter something like this

asset_cache_buster :none

# Make a copy of sprites with a name that has no uniqueness of the hash.
on_sprite_saved do |filename|
  if File.exists?(filename)
    FileUtils.mv filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')
  end
end

# Replace in stylesheets generated references to sprites
# by their counterparts without the hash uniqueness.
on_stylesheet_saved do |filename|
  if File.exists?(filename)
    css = File.read filename
    File.open(filename, 'w+') do |f|
      f << css.gsub(%r{-s([a-z0-9]{10})\.png}, '.png?v\1')
    end
  end
end

credits goes here How to remove the hash from Compass's generated sprite image filenames?

How to remove the hash from Compass's generated sprite image filenames?

Unfortunately asset_cache_buster :none option does not disable adding the hash to the end of the filename.

Like I wrote few time ago (in french), Compass has no way to disable the cache hash buster, but I propose a solution.

In your configuration file (eg config.rb) add the following lines:

# Make a copy of sprites with a name that has no uniqueness of the hash.
on_sprite_saved do |filename|
  if File.exists?(filename)
    FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')
  end
end

# Replace in stylesheets generated references to sprites
# by their counterparts without the hash uniqueness.
on_stylesheet_saved do |filename|
  if File.exists?(filename)
    css = File.read filename
    File.open(filename, 'w+') do |f|
      f << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png')
    end
  end
end

Now, uses compass cleanto remove generated files and restarts a compilation with compass compile.

You obtain, for example, a images/icons-scb1e5456d5.png file and a images/icons.png file. In the stylesheets, all references to the sprites now point to the version without hash.

Be sure to keep the file has a hash provided to optimize compile times by Compass.

How to remove the hash from Compass's generated sprite image filenames?

Unfortunately asset_cache_buster :none option does not disable adding the hash to the end of the filename.

Like I wrote few time ago (in french), Compass has no way to disable the cache hash buster, but I propose a solution.

In your configuration file (eg config.rb) add the following lines:

# Make a copy of sprites with a name that has no uniqueness of the hash.
on_sprite_saved do |filename|
  if File.exists?(filename)
    FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')
  end
end

# Replace in stylesheets generated references to sprites
# by their counterparts without the hash uniqueness.
on_stylesheet_saved do |filename|
  if File.exists?(filename)
    css = File.read filename
    File.open(filename, 'w+') do |f|
      f << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png')
    end
  end
end

Now, uses compass cleanto remove generated files and restarts a compilation with compass compile.

You obtain, for example, a images/icons-scb1e5456d5.png file and a images/icons.png file. In the stylesheets, all references to the sprites now point to the version without hash.

Be sure to keep the file has a hash provided to optimize compile times by Compass.

Stop Compass from regenerating sprite all the time

Compass should cache it by default, unless you use set force: true. Try running compass from the Terminal and see if the same happens.

The grunt-contrib-compass is just a thin wrapper around Compass.

how to out put ../images.. for sprite in compass sass?

Edit: http_path = '../' may indeed be what you need.

See also generated_images_dir here: http://compass-style.org/help/documentation/configuration-reference/

If you haven't set a custom project_path or project_dir, you should be able to just set it to ../images, though you may also need to set relative_assets to true.

And there isn't much else you need to know about sprite-url and such helpers aside from what you'll find here: http://compass-style.org/reference/compass/helpers/sprites/ or in the issues on GitHub.

Sprite generation Compass/SASS

It looks like a CodeKit issue which is getting fixed:
https://github.com/bdkjones/CodeKit/issues/297

Until then I am using a workaround detailed here.

Disable 'asset-url' for Compass + Bootstrap SASS style

Compass prioritizes local versions of code over the gem version, which is great for developing your own extensions (building/installing every time you make a minor change while testing is a bit of a pain). Removing the local version will allow the gem version to take over.

How do I use a compass-generated sprite for generated content?

Don't load the sprite map as "content". Set content to " ", load the sprite as a background, and control it the way you would with any other text/image-replacement sprite.

a:before {
  @include <map>-sprite(<icon>);
  @include sprite-dimensions(<map>, <icon>);
  content: " ";
}

Where <map> and <icon> are replaced by your specific sprite-map and icon names.

---

Related Topics