All notes
Compass

Command line

compass-style.org: help.


compass version
compass watch
compass compile --production

Spriting

theSassWay.com: spriting with sass and compass.

Image spriting works by combining a bunch of images (called “sprites”) into one large image (or “sprite sheet”) to significantly reduce the number of requests made to the server. Then, with clever use of background-position only part of the sprite sheet is revealed each time an image is needed.

@import

use the Compass’s magic import directive:


@import "images/toolbar/*.png";

When Compass sees a “*.png” pattern in an import directive it assumes it is a folder of sprites that needs to be converted into a sprite sheet.

@include



/*
images/
|
`-- toolbar/
    |-- bold.png
    |-- italic.png
    |-- link.png
*/

@import "images/toolbar/*.png";

/* ----- all-{FOLDER NAME}-sprites mixin ----- */

/* This mixin is generated to make custom classes for all of your sprites automatically: */
@include all-toolbar-sprites; /* Format: all-FOLDERNAME-sprites */

/* Will output the following CSS: */

.toolbar-sprite, .toolbar-bold, .toolbar-italic, .toolbar-link {
  background-image: url('../images/toolbar-s1f1c6cbfd0.png');
  background-repeat: no-repeat;
}

.toolbar-bold {
  background-position: 0 0;
}

.toolbar-italic {
  background-position: 0 -24px;
}

.toolbar-link {
  background-position: 0 -48px;
}

/* ----- {FOLDER NAME}-sprite mixin ----- */

@import "images/toolbar/*.png";

.bold-icon { @include toolbar-sprite(bold); }
.italic-icon { @include toolbar-sprite(italic); }
.link-icon { @include toolbar-sprite(link); }

Sprite maps



$icons: sprite-map("toolbar/*.png");

.bold-icon { background: sprite($icons, bold); }
.italic-icon { background: sprite($icons, italic); }
.link-icon { background: sprite($icons, link); }