updated docs for magic selectors

pengwynn · Mar 25, 2011 · 337d4da · 337d4da
1 parent bd11d0b
commit 337d4da
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 2 deletions.
diff --git a/doc-src/Gemfile.lock b/doc-src/Gemfile.lock
@@ -8,7 +8,7 @@ GIT
 PATH
   remote: ..
   specs:
-    compass (0.11.beta.4.dda7c94)
+    compass (0.11.beta.4.bd11d0b)
       chunky_png (~> 1.1.0)
       sass (>= 3.1.0.alpha.249)
 

diff --git a/doc-src/content/CHANGELOG.markdown b/doc-src/content/CHANGELOG.markdown
@@ -14,7 +14,14 @@ The Documentation for the [latest stable release](http://compass-style.org/docs/
 
 The Documentation for the [latest preview release](http://beta.compass-style.org/)
 
-0.11.beta.4 (UNRELEASED)
+0.11.beta.5 (UNRELEASED)
+------------------------
+
+### Compass Sprites
+
+[Magic Imports](/help/tutorials/spriting/#magic-selectors) have been added
+
+0.11.beta.4 (02/25/2011)
 ------------------------
 
 * Extensions that are installed into ~/.compass/extensions will be automatically available to all your compass projects.

diff --git a/doc-src/content/help/tutorials/spriting.markdown b/doc-src/content/help/tutorials/spriting.markdown
@@ -100,6 +100,42 @@ might want to avoid it. For instance, if your sprite map has more than about 20
 sprites, you may find that hand crafting the import will speed up compilation times. See
 the section on [performance considerations](#performance) for more details.
 
+<a name="magic-selectors"></a>
+## Magic Selectors
+
+If you want to add selectors for your sprites, it's easy todo by adding `_active` `_target` or `_hover` to the file name, In the example below we have a sprite directory that looks like:
+
+* `link/icon.png`
+* `link/icon_hover.png`
+* `link/icon_active.png`
+* `link/icon_target.png`
+
+Now in our sass file we add:
+
+    @import "link/*.png";
+
+    @include link_sprite(icon);
+
+And your stylesheet will compile to:
+
+     .link-icon {
+      background-position: 0 0;
+    }
+
+     .link-icon:hover, .link-icon_hover, .link-icon_hover-hover {
+      background-position: 0 -20px;
+    }
+
+     .link-icon:target, .link-icon_hover_target, .link-icon_hover-target {
+      background-position: 0 -30px;
+    }
+
+     .link-icon:active, .link-icon_hover_active, .link-icon_hover-active {
+      background-position: 0 -10px;
+    }
+
+
+
 <a name="customization-options"></a>
 ## Customization Options