Module Compass::SassExtensions::Functions::Sprites
In: lib/compass/sass_extensions/functions/sprites.rb

Methods

Included Modules

Sass::Script::Value::Helpers

Classes and Modules

Module Compass::SassExtensions::Functions::Sprites::VariableReader

Constants

ZERO = number(0)
BOOL_FALSE = bool(false)
VALID_SELECTORS = %w(hover active target focus)
IDENTIFIER_RX = /\A#{Sass::SCSS::RX::IDENT}\Z/   Determines if the CSS selector is valid

Public Instance methods

Returns the sprite file as an inline image

   @include "icon/*.png";
    #{$icon-sprite-base-class} {
      background-image: inline-sprite($icon-sprites);
     }

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;

If the `use_percentages` parameter is passed as true, percentages will be used to position the sprite. Example output:

    background: url('/images/icons.png?12345678') 0 50% no-repeat;

Returns boolean if sprite has a parent

Returns the path to the original image file for the sprite with the given name

Returns boolean if sprite has the selector

Returns the height of the generated sprite map

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 a list of all sprite names

Returns the system path of the sprite file

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;

If you set the `use_percentages` parameter to true, the position will be expressed in percentages. An example:

    background-position: sprite-position($icons, new, 0, 0, true);

Would result in something like this:

    background-position: 0 42%;

return the name of the selector file

Returns a url to the sprite image.

Returns the width of the generated sprite map

Protected Instance methods

[Validate]