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

Replaced all references to "icons" in the tutorial with "my-icons" to make it clearer that the @include all-icon-sprites is dependent on the directory name.

Browse Source 
Updated the naming in the magic selectors section to be more clear.

Conflicts:

	doc-src/content/help/tutorials/spriting.markdown
This commit is contained in:
Andrew Pietsch 2012-03-11 19:44:13 +11:00 committed by Chris Eppstein
parent c8174b5679
commit 7042337393
2 changed files with 59 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,10 +19,10 @@ of several convenient ways.
For this tutorial, let's imagine that in your project's image folder there are four icons:
* `images/icon/new.png`
* `images/icon/edit.png`
* `images/icon/save.png`
* `images/icon/delete.png`
* `images/my-icons/new.png`
* `images/my-icons/edit.png`
* `images/my-icons/save.png`
* `images/my-icons/delete.png`
Each is an icon that is 32px square.
<a name="basic-usage"></a>
@ -32,23 +32,23 @@ Each is an icon that is 32px square.
The simplest way to use these icon sprites is to let compass give you a class for each sprite:
@import "icon/*.png";
@include all-icon-sprites;
@import "my-icons/*.png";
@include all-my-icons-sprites;
And you'll get the following CSS output:
.icon-sprite,
.icon-delete,
.icon-edit,
.icon-new,
.icon-save { background: url('/images/icon-s34fe0604ab.png') no-repeat; }
.my-icons-sprite,
.my-icons-delete,
.my-icons-edit,
.my-icons-new,
.my-icons-save { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; }
.icon-delete { background-position: 0 0; }
.icon-edit { background-position: 0 -32px; }
.icon-new { background-position: 0 -64px; }
.icon-save { background-position: 0 -96px; }
.my-icons-delete { background-position: 0 0; }
.my-icons-edit { background-position: 0 -32px; }
.my-icons-new { background-position: 0 -64px; }
.my-icons-save { background-position: 0 -96px; }
You can now apply the `icon-XXX` classes to your markup as needed.
You can now apply the `my-icons-XXX` classes to your markup as needed.
Let's go over what happened there. The import statement told compass to [generate a
stylesheet that is customized for your sprites](https://gist.github.com/729507). This
@ -77,25 +77,25 @@ Example:
****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
this is done by using the magic `my-icons-sprite` mixin. Note that the mixin's name is dependent
on the name of the folder in which you've placed your icons.
@import "icon/*.png";
@import "my-icons/*.png";
.actions {
.new { @include icon-sprite(new); }
.edit { @include icon-sprite(edit); }
.save { @include icon-sprite(save); }
.delete { @include icon-sprite(delete); }
.new { @include my-icons-sprite(new); }
.edit { @include my-icons-sprite(edit); }
.save { @include my-icons-sprite(save); }
.delete { @include my-icons-sprite(delete); }
}
And your stylesheet will compile to:
.icon-sprite,
.my-icons-sprite,
.actions .new,
.actions .edit,
.actions .save,
.actions .delete { background: url('/images/icon-s34fe0604ab.png') no-repeat; }
.actions .delete { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; }
.actions .new { background-position: 0 -64px; }
.actions .edit { background-position: 0 -32px; }
@ -136,7 +136,7 @@ magic, some people are scared by it, and others are curious about how the magic
you would like to avoid the magic, you can use compass to generate an import for you. On the
command line:
compass sprite "images/icon/*.png"
compass sprite "images/my-icons/*.png"
This will create file using your project's preferred syntax, or you can specify the
output filename using the `-f` option and the syntax will be inferred from the extension.
@ -176,4 +176,4 @@ Or install the Rubygem:
gem install oily_png
Compass will automatically detect its presence.
Compass will automatically detect its presence.

67
doc-src/content/help/tutorials/spriting/magic-selectors.markdown
View File

@ -5,70 +5,69 @@ crumb: Magic Selectors
classnames:
- tutorial
---
#Sprite Tutorial
# Sprite Tutorial
<%= sprite_tutorial_links %>
## 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:
* `selectors/ten-by-ten.png`
* `selectors/ten-by-ten_hover.png`
* `selectors/ten-by-ten_active.png`
* `selectors/ten-by-ten_target.png`
* `my-buttons/glossy.png`
* `my-buttons/glossy_hover.png`
* `my-buttons/glossy_active.png`
* `my-buttons/glossy_target.png`
Now in our sass file we add:
@import "selectors/*.png";
@import "my-buttons/*.png";
a {
@include selectors-sprite(ten-by-ten)
@include my-buttons-sprite(glossy)
}
And your stylesheet will compile to:
.selectors-sprite, a {
background: url('/selectors-sedfef809e2.png') no-repeat;
.my-buttons-sprite, a {
background: url('/my-buttons-sedfef809e2.png') no-repeat;
}
a {
background-position: 0 0;
}
a:hover, a.ten-by-ten_hover, a.ten-by-ten-hover {
background-position: 0 -20px;
a:hover, a.glossy_hover, a.glossy-hover {
background-position: 0 -40px;
}
a:target, a.ten-by-ten_target, a.ten-by-ten-target {
background-position: 0 -30px;
a:target, a.glossy_target, a.glossy-target {
background-position: 0 -60px;
}
a:active, a.ten-by-ten_active, a.ten-by-ten-active {
background-position: 0 -10px;
a:active, a.glossy_active, a.glossy-active {
background-position: 0 -20;
}
Alternatively you can use the `@include all-selectors-sprites;` after the import and get the following output:
Alternatively you can use the `@include all-my-buttons-sprites;` after the import and get the following output:
.selectors-sprite, .selectors-ten-by-ten {
background: url('/selectors-sedfef809e2.png') no-repeat;
.my-buttons-sprite, .my-buttons-glossy {
background: url('/my-buttons-sedfef809e2.png') no-repeat;
}
.selectors-ten-by-ten {
.my-buttons-glossy {
background-position: 0 0;
}
.selectors-ten-by-ten:hover, .selectors-ten-by-ten.ten-by-ten_hover, .selectors-ten-by-ten.ten-by-ten-hover {
.my-buttons-glossy:hover, .my-buttons-glossy.glossy_hover, .my-buttons-glossy.glossy-hover {
background-position: 0 -40px;
}
.my-buttons-glossy:target, .my-buttons-glossy.glossy_target, .my-buttons-glossy.glossy-target {
background-position: 0 -60px;
}
.my-buttons-glossy:active, .my-buttons-glossy.glossy_active, .my-buttons-glossy.glossy-active {
background-position: 0 -20px;
}
.selectors-ten-by-ten:target, .selectors-ten-by-ten.ten-by-ten_target, .selectors-ten-by-ten.ten-by-ten-target {
background-position: 0 -30px;
}
.selectors-ten-by-ten:active, .selectors-ten-by-ten.ten-by-ten_active, .selectors-ten-by-ten.ten-by-ten-active {
background-position: 0 -10px;
}
## Disabling
To disable this feature set `$disable-magic-sprite-selectors` to true before calling the sprite mixin
To disable this feature set `$disable-magic-sprite-selectors` to true before calling the sprite mixin
a {
$disable-magic-sprite-selectors:true;
@include selectors-sprite(ten-by-ten)
@include my-buttons-sprite(glossy)
}