Gerillass
v2.1.0* You can call mixins with or without the gls- namespace (e.g. @include gls-sprite();).
The Sprite Sass mixin helps you apply background images to the selected elements using the CSS sprite technique.
Arguments
| Name | Type | Description |
|---|---|---|
$image-url | string | The URL of the sprite image. Important: Don't forget that the image link must be either absolute or relative to the generated CSS file. |
$position | number | string | Sets the position of the background-image. Multiple values must be separated by a space. |
To learn more about the background-position property values, check out the [links](#related-links) at the end of the page.
Examples
Every example on this page draws from one sheet, sprite.png: six frames of a
walk cycle laid out in a row, each 100 by 100, in a 600 by 100 image.
One tile. Pass the sheet and the position of the frame you want, and size the element to match a single tile.
.element {
width: 100px;
height: 100px;
@include sprite("/images/docs/sprite.png", 0 0);
}.element {
width: 100px;
height: 100px;
display: inline-block;
background-image: url("/images/docs/sprite.png");
background-position: 0 0;
background-repeat: no-repeat;
}Several tiles from the same sheet. The mixin is called once with the sheet, and once per element with only a position: each frame sits 100px further to the left, so the offsets run 0, -100px, -200px and so on.
.frame {
width: 100px;
height: 100px;
@include sprite("/images/docs/sprite.png");
}
.frame--1 { @include sprite(0 0); }
.frame--2 { @include sprite(-100px 0); }
.frame--3 { @include sprite(-200px 0); }
.frame--4 { @include sprite(-300px 0); }.frame {
width: 100px;
height: 100px;
display: inline-block;
background-image: url("/images/docs/sprite.png");
background-repeat: no-repeat;
}
.frame--1 {
background-position: 0 0;
}
.frame--2 {
background-position: -100px 0;
}
.frame--3 {
background-position: -200px 0;
}
.frame--4 {
background-position: -300px 0;
}Why a sheet in the first place. The six frames are a walk cycle, so stepping the background position across them in one animation plays it, out of a single request rather than six.
.element {
width: 100px;
height: 100px;
@include sprite("/images/docs/sprite.png", 0 0);
animation: walk 0.7s steps(6) infinite;
}
@keyframes walk {
to {
background-position: -600px 0;
}
}.element {
width: 100px;
height: 100px;
display: inline-block;
background-image: url("/images/docs/sprite.png");
background-position: 0 0;
background-repeat: no-repeat;
animation: walk 0.7s steps(6) infinite;
}
@keyframes walk {
to {
background-position: -600px 0;
}
}