Merge pull request #779 from MoOx/stable
Add "css" keywords on the Compass Sprite helpers doc.
This commit is contained in:
commit
ea5c305a72
@ -1,8 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: Compass Sprite Helpers
|
title: CSS Sprite Helpers for Compass
|
||||||
crumb: Sprites
|
crumb: Sprites
|
||||||
framework: compass
|
framework: compass
|
||||||
meta_description: Helper functions for working with Sprite images.
|
meta_description: Helper functions for working with CSS Sprite images.
|
||||||
layout: core
|
layout: core
|
||||||
classnames:
|
classnames:
|
||||||
- reference
|
- reference
|
||||||
@ -16,13 +16,13 @@ documented_functions:
|
|||||||
- "sprite-url"
|
- "sprite-url"
|
||||||
- "sprite-position"
|
- "sprite-position"
|
||||||
---
|
---
|
||||||
%h1 Compass Sprite Helpers
|
%h1 <strong>CSS Sprite</strong> Helpers for Compass
|
||||||
|
|
||||||
:markdown
|
:markdown
|
||||||
These helpers make it easier to build and to work with sprites.
|
These helpers make it easier to build and to work with <em>css sprites</em>.
|
||||||
|
|
||||||
While it is allowed to use these directly, to do so is considered "advanced usage".
|
While it is allowed to use these directly, to do so is considered "advanced usage".
|
||||||
It is recommended that you instead use the sprite mixins that are designed to work
|
It is recommended that you instead use the css sprite mixins that are designed to work
|
||||||
with these functions.
|
with these functions.
|
||||||
|
|
||||||
See the [Spriting Tutorial](/help/tutorials/spriting/) for more information.
|
See the [Spriting Tutorial](/help/tutorials/spriting/) for more information.
|
||||||
@ -33,31 +33,31 @@ documented_functions:
|
|||||||
sprite-map(<span class="arg">$glob</span>, <span class="arg">...</span>)
|
sprite-map(<span class="arg">$glob</span>, <span class="arg">...</span>)
|
||||||
.details
|
.details
|
||||||
:markdown
|
:markdown
|
||||||
Generates a sprite map from the files matching the glob pattern. Uses the
|
Generates a css sprite map from the files matching the glob pattern. Uses the
|
||||||
keyword-style arguments passed in to control the placement.
|
keyword-style arguments passed in to control the placement.
|
||||||
|
|
||||||
Only PNG files can be made into sprites at this time.
|
Only PNG files can be made into css sprites at this time.
|
||||||
|
|
||||||
The `$glob` should be glob pattern relative to the images directory that specifies
|
The `$glob` should be glob pattern relative to the images directory that specifies
|
||||||
what files will be in the sprite. For example:
|
what files will be in the css sprite. For example:
|
||||||
|
|
||||||
$icons: sprite-map("icons/*.png");
|
$icons: sprite-map("icons/*.png");
|
||||||
background: $icons;
|
background: $icons;
|
||||||
|
|
||||||
This will generate a sprite map and return a reference to it. It's important to
|
This will generate a css sprite map and return a reference to it. It's important to
|
||||||
capture this to a variable, because you will need to use it later when creating
|
capture this to a variable, because you will need to use it later when creating
|
||||||
sprites. In the above example you might end up with a new file named
|
css sprites. In the above example you might end up with a new file named
|
||||||
`images/sprites/icons-a2ef041.png` and your css stylesheet will have:
|
`images/sprites/icons-a2ef041.png` and your css stylesheet will have:
|
||||||
|
|
||||||
background: url('/images/sprites/icons-a2ef041.png?1234678') no-repeat;
|
background: url('/images/sprites/icons-a2ef041.png?1234678') no-repeat;
|
||||||
|
|
||||||
The exact image name is not something you should depend on as it may change based on the
|
The exact image name is not something you should depend on as it may change based on the
|
||||||
arguments you pass in. Instead, you can use the `sprite-url()` function to create a
|
arguments you pass in. Instead, you can use the `sprite-url()` function to create a
|
||||||
reference to the sprite map without generating the image again. Alternatively, simply
|
reference to the css sprite map without generating the image again. Alternatively, simply
|
||||||
using the sprite map variable in an property will have the same effect as calling
|
using the sprite map variable in an property will have the same effect as calling
|
||||||
`sprite-url()`.
|
`sprite-url()`.
|
||||||
|
|
||||||
For each sprite in the sprite map you can control the position, spacing, and whether or
|
For each sprite in the css sprite map you can control the position, spacing, and whether or
|
||||||
not it repeats. You do this by passing arguments to this function that tell each sprite
|
not it repeats. You do this by passing arguments to this function that tell each sprite
|
||||||
how to behave. For instance if there is a icons/new.png then you can control it like so:
|
how to behave. For instance if there is a icons/new.png then you can control it like so:
|
||||||
|
|
||||||
@ -91,8 +91,8 @@ documented_functions:
|
|||||||
sprite-map-name(<span class="arg">$map</span>)
|
sprite-map-name(<span class="arg">$map</span>)
|
||||||
.details
|
.details
|
||||||
:markdown
|
:markdown
|
||||||
Returns the name of a sprite map
|
Returns the name of a css sprite map
|
||||||
The name is derived from the folder than contains the sprites.
|
The name is derived from the folder than contains the css sprites.
|
||||||
|
|
||||||
#sprite-file.helper
|
#sprite-file.helper
|
||||||
%h3
|
%h3
|
||||||
|
Loading…
Reference in New Issue
Block a user