Auto-merge CSS Sprite with Compass (reproduced in CSS)

CSS Sprite is also called CSS sprites or CSS sprites, is a background image of the flattening technology. With CSS Sprite, you can reduce the number of requests on the page and reduce the amount of bytes used by the image, to achieve the goal of increasing page access speed. But it also has the criticism of the place, is the jigsaw puzzle and the cost of later maintenance is relatively large. It is also because of this that many developers are lazy about using CSS Sprite charts.

For this time-consuming, tedious, repetitive work, the best solution is to hand it over to the tools. This article describes how to use compass to merge CSS sprite diagrams.

Installing Compass

First please make sure the computer is installed ruby and sass the environment, ruby and sass the installation process can refer to:

Sass Getting Started Guide

After the installation is complete, it can be confirmed by following instructions:

$ ruby -vruby 2.0.0p451 (2014-02-24) [x64-mingw32]$ sass -vSass 3.4.6 (Selective Steve)

Then install compass :

$ gem install compass// 查看compass版本$ compass -vCompass 1.0.1 (Polaris)

PS: The code in this article runs the environment: sass: 3.4.6 , Compass: 1.0.1 , when testing, please confirm SASS version is not below 3.4.6 , compass version is not below 1.0.1 .

Configure the Compass Project

Go to the project directory, run on the command line:

$ compass init

The corresponding directories and configuration files are generated. imagesCreate directories under directory to share store the icons that need to be merged. The project directory structure is as follows:

- sass- stylesheet- images  |-- share  |-- magic  |-- setting

config.rbThe file is configured as follows:

http_path = "/"css_dir = "stylesheets"sass_dir = "sass"images_dir = "images"javascripts_dir = "javascripts"relative_assets = true // 使用相对目录line_comments = false // 关闭行注释

An example of a complete project catalog can be viewed on GitHub: Https://github.com/Bubblings/compass-sprite

Merge Sprite graph output all sprite pattern

sassCreate a new file in the directory share.scss and write the following code:

@import "compass/utilities/sprites";    // 加载compass sprites模块@import "share/*.png"; // 导入share目录下所有png图片@include all-share-sprites; // 输出所有的雪碧图css

Command-line calls compass compile are compiled, images a merged picture appears under the directory share-xxxxxxxx.png , and the stylesheet corresponding file is generated in the directory share.css :

. Share-sprite,. Share-github,. SHARE-QQ,. Share-weibo{Background-image: Urlbackground-repeat: No-repeat;} .share-github { Background-position: 0 0;} .share-qq { Background-position: 0-23px;} .share-weibo { Background-position: 0-47px;}   

At this point, we implemented a simple sprite merge and only used three lines of code. is not a little bit excited ^_^.
The generated code .share-sprite is the base class for the sprite diagram, which is explained in detail later in this article. The default class rules for each sprite graph generated are: .目录名-图片名 . If you want to customize, we can do this by invoking a single sprite graph below.

Invoking a single Sprite pattern

sassCreate a new file in the directory single-share.scss and write the following code:

@import "compass/utilities/sprites";    // 加载compass sprites模块@import "share/*.png"; // 导入share目录下所有png图片.test { @include share-sprites(github);}

The compiled CSS is:

.share-sprite, .test {  background-image: url(‘../images/share-s7fefca4b98.png‘); background-repeat: no-repeat;}.test { background-position: 0 -23px;}

Smart Output with Magic Elf Selector

Sometimes our icons come in a variety of states, such as,,, and hover active focus target so on. With Compass's Magic elf selector, we can intelligently merge the icons of each state and output the corresponding CSS. When used, we need to name the icons according to certain rules. For example:

weibo.png            // 默认状态图标weibo_hover.png     // hover状态图标weibo_active.png     // active状态图标

sassCreate a new file in the directory magic.scss and write the following code:

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

The compiled CSS is:

. Magic-sprite,. Magic-weibo{Background-image: Url‘.. /images/magic-s758f6928e8.png ');Background-repeat:No-repeat;}. Magic-weibo{ background-position: 0 0;} . Magic-weibo: Hover, . Magic-weibo. weibo-hover { background-position: 0-  48px; }. Magic-weibo: Active, . Magic-weibo. weibo-active { background-position:  0-24px;}                 

Sprite Map Configuration

We have made use compass of the synthesis of simple sprite graphs. There are also a number of options available to compass configure, as described below.

PS: The following configuration options are no longer separate examples, refer to the files in the sample project setting.scss .

First look at the configuration-related syntax:

$<map>-<property>: setting;                // 配置所有sprite$<map>-<sprite>-<property>: setting; // 配置单个sprite

Description

• <map>: The folder name that corresponds to the icon, as in the example above: share andmagic
• <sprite>: The name of the individual icon, as in the example above: weibo , qq , github etc.

Configure Sprite Spacing

$<map>-spacing: 5px;                // 配置所有sprite间距为5px，默认为0px$<map>-<sprite>-spacing: 10px; // 配置单个sprite间距为10px，默认继承$<map>-spacing的值

Configuring Sprite Repeatability

$<map>-repeat: no-repeat/repeat-x;        // 配置所有sprite的重复性，默认为no-repeat$<map>-<sprite>-repeat: no-repeat/repeat-x;// 配置单个sprite的重复性，默认继承$<map>-repeat的值

Configure the location of the sprite

$<map>-position: 0px;                // 配置所有sprite的位置，默认为0px$<map>-<sprite>-position: 0px; // 配置单个sprite的位置，默认继承$<map>-position的值

Configure how sprites are laid out

$<map>-layout: vertical/horizontal/diagonal/smart;        // 默认布局方式为vertical

Clear Expired Sprite

$<map>-clean-up: true/false;        // 默认值为true

Whenever you add, delete, or change a picture, a new sprite is created, and by default compass will automatically remove the old sprite, or it can be configured $<map>-clean-up: false; to retain the old sprite.

Basic classes for configuring sprites

When using a Sprite, Compass automatically generates a base class to apply the common style ( background-image for example), the default class name, which $<map>-sprite is the base class in the example above, and .share-sprite .magic-sprite of course Compass provides the option to customize the class name:

$<map>-sprite-base-class: ".class-name";

Magic Elf Selector switch

The above has been described how to use the Magic Elf selector intelligent output Sprite, by default, Compass is to turn on this function, that is, compass by default will be _hover , _active such as the end of the image automatically output corresponding :hover , :active such as Pseudo-class style. Of course, if you don't want to, you can disable it.

$disabled-magic-sprite-selectors: false; // 默认为true

Set Sprite Size

When we merge sprite charts, many times the images are different in size, so how do we set the dimensions for each sprite when we use them? Compass has a configuration that automatically sets each sprite size, which is turned off by default, and we just need to enable it manually.

$setting-sprite-dimensions: true;    // 启用自动设置sprite尺寸，默认值为false

The dimensions of the output are automatically added to the style, for example:

.setting-compass {  background-position: -5px 0; height: 35px; width: 200px;}

Compass, of course, provides this functionality only if it is set individually for a sprite. The syntax is as follows:

$<map>-sprite-width($name); // $name为合并前的图片名称$<map>-sprite-height($name);

For example:

.special {    @include setting-sprite(compass);    width: setting-sprite-width(compass); height: setting-sprite-height(compass);}

Then the output of the CSS is:

.special {  background-position: -5px 0; width: 200px; height: 35px;} 

Project examples

A simple example is available on GitHub for your reference:

Compass Merge Sprite diagram example code

Original address: http://riny.net/2014/compass-sprite/

Auto-merge CSS Sprite with Compass (reproduced in CSS)