Using Compass to generate sprite graphs

Create a project using Compass

To use Compass in a new project, you can open the command line tool and enter the following instructions

Compass Create My-project

If the My-project directory does not exist, the above command creates a directory called My-project and adds the following files to it:

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/8C/1F/wKioL1hjJpGTu5VpAAAkZMXTHik172.png "title=" Qq20161228101105.png "alt=" Wkiol1hjjpgtu5vpaaakzmxthik172.png "/>

If you do not pass a directory parameter for the Compass Create command, it will use the directory you currently reside in.

In the config.rb file, you can modify some of the compass's configuration, such as the resource location and the degree of compression. The SASS directory contains some initial stylesheets that you can edit, rename, or discard completely, but this folder is where you store your SASS style sheet. Finally, the stylesheets directory is used to store the compiled CSS file.

CONFIG.RB file:

require  ' Compass/import-once/activate ' # require any additional compass plugins  here.# Set this to the root of your project when  Deployed: #配置服务器路径http_path  =  "/" #配置css  sass images javascripts path css_dir =  " StyleSheets "sass_dir = " sass "images_dir = " Images "javascripts_dir = " javascripts "# you can select your preferred output style here  (Can be  overridden via the command line): #根据个人偏好选择输出样式  :nested nested   :compact tightly  :compressed Compression # output_style = :expanded or :nested or :compact  Or :compressed# to enable relative paths to assets via compass  helper functions. uncomment: #相对路径 # relative_assets = true# to disable  debugging comments that display the original location of your selectors.  uncomment:# line_comments = false# if you prefer the indented  Syntax, you might want to regenerate this# project again passing  --syntax sass, or you can uncomment this:# preferred_syntax =  :sass# and then run:# sass-convert -r --from scss --to sass  sass scss && rm -rf sass && mv scss sass

Configuring options when setting up a project

When using the compass Create command, you can use some options to configure your project:

--bare (does not include the default style sheet for installation);

--syntax Sass (Use indentation syntax in the default style sheet);

--sass-dir "Cool" (use ' cool ' directory to store sass files);

--css-dir "Style" (using the ' style ' directory to store CSS files);

--images-dir "img" (Use the ' img ' directory to store images);

--fonts-dir "Type" (using the ' type ' directory to store the font file);

--javascripts-dir "JS" (use ' JS ' directory to store JavaScript files).

For example:

Compass Create My-project--bare--sass-dir "cool"--css-dir "style"

Start making Sprite Chart

Get some icon icons first and get some free icon sets Https://github.com/Keyamoon/IcoMoon-Free

Folder directory structure: (images directory has a icons subdirectory to hold some. png images)

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/8C/1F/wKioL1hjKqfxZqa0AABAhpv2YDU449.png "title=" Qq20161228105607.png "alt=" Wkiol1hjkqfxzqa0aabahpv2ydu449.png "/>

1. Create a Sprite chart

Open Screen.scss and add the following code:

Load the Compass Sprites module @import "compass/utilities/sprites";//Tell Compass to generate a sprite map from all PNG images in the images/icons/directory @import " Icons/*.png ";

The command-line tool performs the compilation by following the instructions

Compass Watch

Finally, a vertical arrangement of icons-sac817bc43c.png is generated under the Images folder.

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/8C/23/wKiom1hjLPbDKLLPAAApEQfhqSk806.png "title=" Qq20161228110929.png "alt=" Wkiom1hjlpbdkllpaaapeqfhqsk806.png "/>

2. Custom Sprite Chart

Variable Name table

$<map>-<property>: setting;$<map>-<sprite>-<property>: setting;

In the above example, the Sprite folder name is icons, so the variable that changes the spacing is named $icons-spacing. In order to set the icons/attachment.png spacing variable, you should assign a value to $icons-attachment-spacing.

Remember that these variables must be defined before the sprite map is imported, otherwise it will not take effect. Please find the sample Code for the wizard configuration under the Configuring-automatic-sprites folder.

2-1. Configure Sprite Spacing

Compass allows you to change the spacing between sprite plots by configuring sprite spacing variables

$<map>-spacing:0px;$<map>-<sprite>-spacing:0px;

The default value is 0px, which means that each icon is put into a sprite without any spacing. Setting this variable or assigning each icon individually will cause each icon to increase the transparency of several pixels around it when flattening

Modify the Screen.scss, for example:

Load Compass Sprites module @import "compass/utilities/sprites";//Configure all Sprite spacing to 100px, default to 0px this sentence should be put in front to take effect $icons-spacing : 100px;//Configure the location of all sprites, the default is 0px$icons-position:100px;//smart layout to put each image in the most suitable place//$icons-layout:smart;//horizontal arrangement $ icons-layout:horizontal;//Portrait//$icons-layout:vertical;//set a separate 12-pixel transparent spacing for the arrow icon. $icons-arrow-spacing:12px;//tells Compass to generate a sprite @import "Icons/*.png" based on all PNG images in the images/icons/directory;

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/8C/20/wKioL1hjMxuw1ndjAAAjW3E5Znc227.png "title=" Qq20161228113418.png "alt=" Wkiol1hjmxuw1ndjaaajw3e5znc227.png "/>650" this.width=650; "src=" http://s3.51cto.com /wyfs02/m00/8c/20/wkiol1hjmzfijek-aaajw3e5znc197.png "title=" Qq20161228113418.png "alt=" Wkiol1hjmzfijek-aaajw3e5znc197.png "/>

The previous picture is automatically deleted and a new icons-s1a799c6c79.png is generated

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/8C/24/wKiom1hjM3DCWjYFAAAQ8j5v1Hs514.png "title=" Qq20161228113442.png "alt=" Wkiom1hjm3dcwjyfaaaq8j5v1hs514.png "/>

2-2. repeatability of configuration icon

In some cases, a horizontal repeating icon in a sprite chart can be of great use. To do this, you can set the repeatability of sprite:

$<map>-repeat:no-repeat/repeat-x;$<map>-<sprite>-repeat:no-repeat/repeat-x;

For example: the arrow icon horizontally tiles the entire graph, and the repeated arrow icons align across the entire sprite map and the widest compass logo.

$icons-arrow-repeat:repeat-x;

2-3, the location of the configuration icon

Sometimes, it is helpful to move an icon position, Compass allows you to move the picture horizontally by setting the position variable

$<map>-position:0px;$<map>-<sprite>-position:0px;

This variable adjusts the horizontal position of the icon in the sprite chart. The default value is 0px, which means that each icon is left-aligned. This value can be a percentage, or it can be a pixel value.

$icons-position:4px; $icons-clubs-position:100%;

In this example, each icon in the sprite is shifted to the right by 4 pixels, and the plum blossom moves to the far right.

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/8C/20/wKioL1hjOYCwX_qYAAATck0YIe8156.png "title=" Qq20161228120252.png "alt=" Wkiol1hjoycwx_qyaaatck0yie8156.png "/>

2-4, set the layout of the icon

Compass has the following types of layouts to choose from:

$<map>-layout:vertical/horizontal/diagonal/smart;

The default layout is vertical, which affects the sprite layout as a whole and tells the compass how to arrange all the icons.

In most cases, you might want to set the layout to smart, which gives compass a minimal amount of white space.

Location and repeatability settings are applied only to landscape or portrait-oriented sprite charts. Location and repeatability settings are not valid for sprite charts with smart layout or diagonal layout

2-5, clear the outdated sprite chart

When you add, delete, or change a picture, a new sprite chart is generated. Compass will automatically remove old sprite maps for you, or you can keep them

$<map>-clean-up:true/false;

By default, when a new sprite chart is generated, Compass automatically removes the old ones. This will prevent your hard disk from being filled with files that are no longer in use, and also make sure that you are not confused about which file your style sheet is using. If you prefer to manually remove old Sprite charts, you can also set it to false

3. Generate Sprite Map CSS

Compass has two very handy mixers that can automatically generate sprite-map CSS

@include all-<map>-sprites; @include <map>-sprite ($name);

Here <map> is a placeholder that will be replaced with the name of a folder containing sprite icons, here is the Icons,all-sprites mixer will write all necessary CSS for the entire sprite.

The second mixer will output a CSS with a standalone named icon, both of which will be created with the import of the icons, so they can only be used after the import

3-1, all-sprites mixer

@import "Compass/utilities/sprites"; @import "Icons/*.png"; @include all-icons-sprites;

This all-icons-sprites mixer will write the necessary CSS for each icon in the sprite chart

. Icons-sprite,.icons-arrow,.icons-attachment,.icons-box-add, ... {background:url ('/images/icons-s0cad3f8f97.png ') no-repeat;}. Icons-arrow {background-position:0 0;}. icons-attachment {background-position: -16px-96px;}. Icons-box-add {background-position:0 -64px;}

Now let's see what this mixer has generated:

(1) It creates a basic class icons-sprite for setting all icon styles from images/icons/;

(2) It creates a class for each file name in its icon directory;

(3) It adds a background image for all icons ;

(4) It adds a background position for all icons .

By default, Compass does not set the width and height of these elements. Compass can automatically generate the size of the icon , but we don't always need it

3-1, single-sprites mixer

This icon will output the CSS for a single icon

@import "Compass/utilities/sprites"; @import "Icons/*.png";. Add-button {@include icons-sprite (box-add);}

The output CSS is as follows:

. Icons-sprite,.add-button {background:url ('/images/icons-s0cad3f8f97.png ') no-repeat;}. Add-button {background-position:0 -358px;}

with the Single-sprite mixer, there is no need to generate a class name because the style is already contained in the selector in. When Compass adds background-image and background-position styles, these options are used directly , in this case, the. Add-button.

compared to the simple and convenient all-sprites mixer, this method generates more less CSS, also gives you more control over the output

This article is from the "Dapengtalk" blog, make sure to keep this source http://dapengtalk.blog.51cto.com/11549574/1886854

Using Compass to generate sprite graphs