examples/compass/app/css/main.scss
@import 'compass/css3';
@import 'compass/reset';
html, body {
font-family: sans-serif;
font-size: 11pt;
line-height: 1.5; }
body {
background: #c2c2cf; }
#all {
background: white;
color: #333;
padding: 10px;
width: 500px;
margin: 50px auto; }
// ### Optional sprite config
// You may put any of these before the `all-icon-sprites` line.
// These are completely optional.
// #### Sprite sets: (/icon/*.png)
$icon-spacing: 0; // How much blank space (in pixels) to put
$icon-dimensions: false; // Sets width/height in the classes
$icon-repeat: no-repeat;
$icon-position: 0;
// #### Individual images: (/icon/mail.png)
$icon-mail-spacing: 0;
$icon-mail-repeat: no-repeat;
$icon-mail-position: 0px;
// ### Sprite setup
// For "mail.png" and "refresh.png", this creates classes for .icon-mail and
// .icon-refresh that you can @extend from.
//
// See: http://compass-style.org/help/tutorials/configuration-reference/
//
@import "icon/*.png";
@include all-icon-sprites;
.image1, .image2 {
width: 16px; height: 16px;
display: inline-block; }
.image1 {
@extend .icon-mail; }
.image2 {
@extend .icon-refresh; }
// ### Advanced control
// The sprite map is available as $icon-sprites. You can then use
// `sprite()` on it.
.image3 {
background: sprite($icon-sprites, refresh); }
//background: url(...) 0 -16px;
.image3-with-offset {
background: sprite($icon-sprites, refresh, -2px, -9px); }
//background: url(...) -2px -19px;