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.

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 know a name of generated sprite with compass-rails?

The folks at Compass can't think of a reason why a developer would need to know the filename of the generated sprite, as mentioned here. I can think of one: pre-loading the sprites with an img tag and capturing the onload event.

Seems like the best possible option is to hack Compass to keep it from generating the random string it appends at the end of the file. See here:

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

Then you'll know the exact name of the generated sprite, which you can reference in your css urls or img src's.

Compass Sprite Filename

If you assume to break the caching, you can look at my answer to the question How to turn off COMPASS SASS cache busting?, which automatically created a copy of sprites without hashing.

Sass / Compass sprites

Do not set background positions manually. You can do that automatically without having Compass generate classes.

Say, you have the following sprites:

  • images/
    • social/
      • facebook.png
      • twitter.png

SASS updated according to @piouPiouM's suggestoin:

$social-sprite-dimensions: true
@import "social/*.png";

#my-semantic-selector {
@include social-sprite(facebook);
}

#another .semantic > selector {
@include social-sprite(twitter);
}

This results in the following clean CSS:

.social-sprite, #my-semantic-selector, #another .semantic > selector {
background: url('/images/social-sa75ff48010.png') no-repeat;
}

#my-semantic-selector {
background-position: 0 -50px;
width: 27px;
height: 25px;
}

#another .semantic > selector {
background-position: 0 -25px;
width: 27px;
height: 25px;
}

It is possible to write a more universal mixin that allows for multiple sprite collections. It will need Compass sprite helpers and sprite base. If multiple sprite collections is a requirement for you and you need an example, please tell so in comments.

@include font-face SCSS issue

Random numbers were added because browser cache fonts base on url, then these random numbers cause every time you compile your codes and put it in your html, it download fonts again.

I have Visual Studio 2013 and compile your code with sass and the result is:

@font-face {
font-family: "NexaBold";
src: font-files("nexa_bold-webfont.woff", "nexa_bold-webfont.ttf", "nexa_bold-webfont.svg", "nexa_bold-webfont.eot"); }

and here is my compass source for font-face mixin:

@mixin font-face(
$name,
$font-files,
$eot: false,
$weight: false,
$style: false
) {
$iefont: unquote("#{$eot}?#iefix");
@font-face {
font-family: quote($name);
@if $eot {
src: font-url($eot);
$font-files: font-url($iefont) unquote("format('eot')"), $font-files;
}
src: $font-files;
@if $weight {
font-weight: $weight;
}
@if $style {
font-style: $style;
}
}
}

if you look my compass version doesn't add any random number at the end of file path.

I myself suggest you to use font-face without compass, use code below:

@font-face {
font-family: 'IranSans';
src: url('/css/fonts/IranSans.eot'); /* IE9 Compat Modes */
src: url('/css/fonts/IranSans.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/css/fonts/IranSans.woff') format('woff'), /* Modern Browsers */
url('/css/fonts/IranSans.ttf') format('truetype'), /* Safari, Android, iOS */
url('/css/fonts/IranSans.svg') format('svg'); /* Legacy iOS */
}

Selectively disable asset.digest in Rails 3, so external site can include stylesheet

You will not have to disable the digests at all.

When Rails precompiles the assets, it adds digests to all the files. However it also creates identical files without digests. So both the following files will load the same css:

  • tumblr-c6ec969ce054623163b9404f6c8330e9.css
  • tumblr.css

If you check the public/assets directory after precompilation you should see both files.

Hope this makes helps.



Related Topics



Leave a reply



Submit