Module | Compass::SassExtensions::Functions::Sprites |
In: |
lib/compass/sass_extensions/functions/sprites.rb
|
ZERO | = | Sass::Script::Number::new(0) |
VALID_SELECTORS | = | %w(hover active target) |
Returns the image and background position for use in a single shorthand property:
$icons: sprite-map("icons/*.png"); // contains icons/new.png among others. background: sprite($icons, new) no-repeat;
Becomes:
background: url('/images/icons.png?12345678') 0 -24px no-repeat;
Returns the path to the original image file for the sprite with the given name
Creates a Compass::SassExtensions::Sprites::SpriteMap object. A sprite map, when used in a property is the same as calling sprite-url. So the following background properties are equivalent:
$icons: sprite-map("icons/*.png"); background: sprite-url($icons) no-repeat; background: $icons no-repeat;
The sprite map object will generate the sprite map image, if necessary, the first time it is converted to a url. Simply constructing it has no side-effects.
Returns the name of a sprite map The name is derived from the folder than contains the sprites.
Returns the position for the original image in the sprite. This is suitable for use as a value to background-position:
$icons: sprite-map("icons/*.png"); background-position: sprite-position($icons, new);
Might generate something like:
background-position: 0 -34px;
You can adjust the background relative to this position by passing values for `$offset-x` and `$offset-y`:
$icons: sprite-map("icons/*.png"); background-position: sprite-position($icons, new, 3px, -2px);
Would change the above output to:
background-position: 3px -36px;