Use compass to automatically spell CSS Sprites

Use compass to automatically spell CSS Sprites

CSS Sprite is also called CSS Sprite, is a picture flattening technology. Multi-use on the icon, a few icons into a picture, the page load only need to load a good picture, and then use background-position with width, height to display different icons. Doing so can reduce the number of page requests. However, think of the icon from the PSD to buckle down, close to a diagram, and then also slowly calculate background-position, which is really drunk, and later if the icon, but also to re-spell once again, after finishing a background-position, It's a big hole.

For this time-consuming manual work, it should be automated. This article describes the use of compass from a CSS sprite.

Installing Compass

Here installation and configuration can refer to my other article, Sass usage Introduction, here is not much to do introduction. Compass is often used in conjunction with SASS, it is recommended to use SASS to improve the efficiency of writing CSS.

Crafting CSS Sprite

First we config.rb make some changes to the file:

# Get the directory that this configuration file exists inFile.dirname(__FILE__)#Compass configurationFile"..""css""../img":production# :development # :production:compact# :expanded # :compressed

This is the main addition of image_dir this item.
Then we add a sass file Tmp.scss:

@import "compass/utilities/sprites";    @import "tmp/*.png";                    @include all-tmp-sprites;

The first line here is the Sprites module that loads the compass.
The second line means to put all the PNG files in the TMP directory together, where TMP is a relative directory, if it is not configured, the default is to sprite_load_path use the item we just added images_dir , in fact, if even this item is not configured and not afraid, the default is called images . In particular, in our current configuration file, we need a TMP directory, placed in the IMG directory, the TMP directory is the image we need to splice.
The third line, meaning the output of all the sprite CSS, which is calculated background-position. In the middle of the TMP needs to be the same as above, how to modify the need to consult the document.

After the call compass compile to compile, found in the IMG directory there is a mosaic image tmp-sxxxxxxxxxx.png, and then the CSS directory generated the corresponding TMP.CSS file.

Image naming optimization

Do you think that the automatic generation of images Shuangshuang, but with a large number of hash numbers in the picture name is very uncomfortable. Let's deal with this number.

Compass provides some hook functions, the compass is called callback, here we use a called on_sprite_saved hook. config.rbAdd the following paragraph to the file, and note that if it is used compass watch to automatically detect changes, it needs to be interrupted and rerun compass watch .

do |filename|  ifFile.exists?(filename)    FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}‘.png‘)  endend

After re-run, found a tmp.png file, and the original hash file is still in, in fact, because the function is used, FileUtils.cp so do is copy, if FileUtils.mv you change it will not have a hash worth of files.
Then look at the Tmp.css file, found inside or with a hash of the file.
Here is another hook to use:

do |filename|  ifFile.exists?(filename)    File.read filename    File‘w+‘do |buffer|      buffer << css.gsub(%r{-s[a-z0-9]{10}‘.png‘)    end  endend

OK, you are done.

The complete config.rb:

# Get The directory that this configuration file exists inDIR =File. DirName (__file__)#Compass ConfigurationSass_path = Dircss_path =File. Join (dir,"..","CSS") Images_dir =".. /img "Environment =:p roduction #:d Evelopment #:p roductionOutput_style =: Compact #: Expanded #: CompressedOn_sprite_saved Do|filename|if File. exists? (filename)# FILEUTILS.CP filename, filename.gsub (%r{-s[a-z0-9]{10}\.png$}, '. png ')    FileUtils. MV FileName, filename.gsub (%r{-s[a-z0-9]{10}\.png$},'. png ')EndEndOn_stylesheet_saved Do|filename|if File. exists? (filename) CSS =File. Read filenameFile. Open (FileName,' w+ ') Do|buffer| Buffer << Css.gsub (%r{-s[a-z0-9]{10}\.png},'. png ')End  EndEnd

Compass also has a number of configuration options, which can be found on the website portal, or this article.

Reference

http://riny.net/2014/compass-sprite/
http://segmentfault.com/q/1010000000308179
http://compass-style.org/help/documentation/configuration-reference/

Use compass to automatically spell CSS Sprites