Use compass to automatically spell css sprite_html/css_WEB-ITnose

Use compass to automatically assemble css sprites

css sprite (css sprite), also called css sprite, is a picture splicing technology. It is mostly used on icons. It combines several icons into one picture. When the page is loaded, you only need to load the assembled picture, and then use background-position with width and height to display different icons. Doing this reduces the number of page requests. However, it is really intoxicating to think about detaching the icons from the psd, combining them into one picture, and then slowly calculating the background-position. Moreover, if the icon is changed later, you will have to put it together again. After calculating the background-position again, it is really a big mistake.

This time-consuming manual work should be automated. This article introduces the use of compass to automatically spell css sprites.

Install compass

You can refer to my other article for installation and configuration here, introduction to SASS usage, so I won’t introduce it here. Compass is often used in conjunction with sass. It is recommended to use sass regularly to improve the efficiency of writing css.

Synthetic css sprite

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

# 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 = :production # :development # :productionoutput_style = :compact # :expanded # :compressed

The main thing here is to add the image_dir 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 to load the sprites module of compass.
The second line means to put together all the png files in the tmp directory. The tmp here is a relative directory. If the sprite_load_path item is not configured, the images_dir item we just added will be used by default. In fact, , if you don’t even configure this item, don’t worry, the default is called images. A special note here is that with our current configuration file, we need a tmp directory, which is placed under the img directory. The tmp directory contains the pictures we need to splice.
The third line means to output the css of all sprites, which is the calculated background-position. The tmp in the middle here needs to be the same as above. You need to consult the documentation for how to modify it.

After calling compass compile for compilation, it was found that a spliced ​​image tmp-sxxxxxxxxxx.png appeared in the img directory, and then the corresponding tmp.css file was generated in the css directory.

Image naming optimization

Do you think it’s cool to automatically generate images, but it’s very uncomfortable to have a long string of hash numbers in the image name. Let's deal with this number below.

compass provides some hook functions, which are called callbacks in compass. Here we use a hook called on_sprite_saved. Add the following paragraph to the config.rb file. Note that if you use compass watch to automatically detect changes, you need to interrupt and re-run compass watch.

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

After re-running, I found that there is an extra tmp.png file, and the original file with hash is still there. In fact, because the FileUtils.cp function is used, it is copied. If it is changed If it becomes FileUtils.mv, there will be no file with hash value.
Then look at the tmp.css file again and find that the file with hash is still used in it.
Another hook needs to be used here:

on_stylesheet_saved do |filename|  if File.exists?(filename)    css = File.read filename    File.open(filename, 'w+') do |buffer|      buffer << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png')    end  endend

ok, you’re done.

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 = :production # :development # :productionoutput_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 filename    File.open(filename, 'w+') do |buffer|      buffer << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png')    end  endend

compass also has many configuration options, you can refer to the official 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/