github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updated docs for new functions

Browse Source
This commit is contained in:
Scott Davis 2011-10-25 16:29:36 -04:00
parent ab20a7b9d1
commit 063803c5cc
1 changed files with 30 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
doc-src/content/help/tutorials/spriting.markdown
View File

@ -62,6 +62,8 @@ is located within it.
<a name='nested-folders'></a> <a name='nested-folders'></a>
## Nested Folders ## Nested Folders
****Note**: The use of `orange` is only for this example, "icon" represents the folder name that contains your sprites.
Sprites stored in a nested folder will use the last folder name in the path as the sprite name. Sprites stored in a nested folder will use the last folder name in the path as the sprite name.
Example: Example:
@ -72,6 +74,8 @@ Example:
<a name="selector-control"></a> <a name="selector-control"></a>
## Selector Control ## Selector Control
****Note**: The use of `icon` is only for this example, "icon" represents the folder name that contains your sprites.
If you want control over what selectors are generated, it is easy to do. In this example, If you want control over what selectors are generated, it is easy to do. In this example,
this is done by using the magic `icon-sprite` mixin. Note that the mixin's name is dependent this is done by using the magic `icon-sprite` mixin. Note that the mixin's name is dependent
on the name of the folder in which you've placed your icons. on the name of the folder in which you've placed your icons.
@ -98,9 +102,35 @@ And your stylesheet will compile to:
.actions .save { background-position: 0 -96px; } .actions .save { background-position: 0 -96px; }
.actions .delete { background-position: 0 0; } .actions .delete { background-position: 0 0; }
<a name="sass_functions"></a>
## Sass Functions
****Note**: The use of `icon` is only for this example, "icon" represents the folder name that contains your sprites.
Getting the image dimensions of a sprite
You can get a unit value by using the magical dimension functions `<map>-sprite-height` and `<map>-sprite-width`
If you are looking to just return the dimensions see the [docs](/reference/compass/utilities/sprites/base/#mixin-sprite-dimensions)
Example:
@import "icon/*.png";
$box-padding: 5px;
$height: icon-sprite-height(some_icon);
$width: icon-sprite-width(some_icon);
.somediv {
height:$height + $box-padding;
width:$width + $box-padding;
}
<a name="magic-imports"></a> <a name="magic-imports"></a>
## Magic Imports ## Magic Imports
****Note**: The use of `icon` is only for this example, "icon" represents the folder name that contains your sprites.
As noted above, compass will magically create sprite stylesheets for you. Some people like As noted above, compass will magically create sprite stylesheets for you. Some people like
magic, some people are scared by it, and others are curious about how the magic works. If magic, some people are scared by it, and others are curious about how the magic works. If
you would like to avoid the magic, you can use compass to generate an import for you. On the you would like to avoid the magic, you can use compass to generate an import for you. On the