-sprite-name

Multiple sprites can be generated by using -sprite-name. Every image that does not specify this will go into the default sprite.

Example:

.icon.world {
    background: url(world.png) no-repeat;
    /* Put login-related icons into a separate sprite for fast loading */
    -sprite-name: login;
}

-sprite-selector

By default Nikwus will repeat the full background, including the sprite URL on each CSS rule. By using a sprite selector this can be avoided and only the background position will be set.

The selector can also be used for generating Retina versions, see the chapter on Retina below.

Example:

.icon {
    /* This becomes the container for the default sprite */
    -sprite-selector: default;
}
.login-icon {
    /* Login icons are put into a separate sprite, that will be configured
       on this CSS rule */
    -sprite-selector: login;
}
.icon.world {
    background: url(world.png) no-repeat;
    -sprite-name: login;
}
.icon.mars {
    background: url(mars.png) no-repeat;
    /* This does not have a ``-sprite-name``, so it goes into the default
       sprite */
}

-sprite

Spriting can be turned off for individual CSS rules by using the -sprite: no declaration. .gif images are not included in a sprite by default as they are often used for animated backgrounds. That can be changed by using -sprite: yes.

Example:

.logo {
    background: url(logo.png) no-repeat;
    -sprite: no;
}
.check {
    background: url(check.gif) no-repeat;
    -sprite: yes;
}

-sprite-autosize

By default Nikwus will write the width and height of the image into it’s CSS rule. This can be turned off with -sprite-autosize.

The width and height are not written into the container if:

• it’s exactly the same as specified in the sprite selector rule

• a width, height, or both have already been specified in this rule

Example:

.icon.world {
    background: url(world.png) no-repeat;
    -sprite-autosize: no;
}
.icon.mars {
    /* Sizes won't be specified for this icon either, because it already
       has a width */
    background: url(mars.png) no-repeat;
    width: 10px;
}