diff --git a/doc-src/content/help/tutorials/spriting.markdown b/doc-src/content/help/tutorials/spriting.markdown index 53966616..1578ef0c 100644 --- a/doc-src/content/help/tutorials/spriting.markdown +++ b/doc-src/content/help/tutorials/spriting.markdown @@ -62,6 +62,8 @@ is located within it. ## 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. Example: @@ -72,6 +74,8 @@ Example: ## 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, 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. @@ -98,9 +102,35 @@ And your stylesheet will compile to: .actions .save { background-position: 0 -96px; } .actions .delete { background-position: 0 0; } + +## 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 `-sprite-height` and `-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; + } + + ## 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 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