Merge branch 'stable'
This commit is contained in:
Chris Eppstein
commit
1f03d96cc9
@ -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.
|
||||
|
||||
@ -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)
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -267,21 +267,20 @@ Feature: Command Line
|
||||
Given I am using the existing project in test/fixtures/stylesheets/compass
|
||||
When I run: compass stats
|
||||
Then I am told statistics for each file:
|
||||
| Filename | Rules | Properties | Mixins Defs | Mixins Used | CSS Selectors | CSS Properties |
|
||||
| sass/border_radius.scss | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
||||
| sass/box.sass | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
||||
| sass/fonts.sass | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
||||
| sass/gradients.sass | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
||||
| sass/image_size.sass | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
||||
| sass/images.scss | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
||||
| sass/layout.sass | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
||||
| sass/legacy_clearfix.scss | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
||||
| sass/lists.scss | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
||||
| sass/print.sass | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
||||
| sass/reset.sass | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
||||
| sass/utilities.scss | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
||||
| ------------------------- | ----- | ---------- | -------------- | ----------- | ------------- | -------------- |
|
||||
| Total.* | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
||||
| Filename | Rules | Properties | Mixins Defs | Mixins Used | Filesize | CSS Selectors | CSS Properties | CSS Filesize |
|
||||
| sass/border_radius.scss | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||
| sass/box.sass | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||
| sass/fonts.sass | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||
| sass/gradients.sass | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||
| sass/image_size.sass | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||
| sass/images.scss | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||
| sass/layout.sass | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||
| sass/legacy_clearfix.scss | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||
| sass/lists.scss | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||
| sass/print.sass | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||
| sass/reset.sass | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||
| sass/utilities.scss | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||
| Total.* | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||
|
||||
@listframeworks
|
||||
Scenario: List frameworks registered with compass
|
||||
|
||||
@ -21,6 +21,8 @@ module Compass
|
||||
else
|
||||
[]
|
||||
end
|
||||
rescue ArgumentError # If HOME is relative
|
||||
[]
|
||||
end
|
||||
end
|
||||
module_function :base_directory, :lib_directory, :shared_extension_paths
|
||||
|
||||
36
test/units/compass_module_test.rb
Normal file
36
test/units/compass_module_test.rb
Normal file
@ -0,0 +1,36 @@
|
||||
require File.join(File.dirname(__FILE__), "..", "test_helper")
|
||||
|
||||
class CompassModuleTest < Test::Unit::TestCase
|
||||
|
||||
def setup
|
||||
Compass.reset_configuration!
|
||||
Compass.instance_variable_set("@shared_extension_paths", nil)
|
||||
@original_home = ENV["HOME"]
|
||||
end
|
||||
|
||||
def teardown
|
||||
ENV["HOME"] = @original_home
|
||||
Compass.reset_configuration!
|
||||
end
|
||||
|
||||
def test_shared_extension_paths_with_valid_home
|
||||
ENV["HOME"] = "/"
|
||||
assert_equal ["/.compass/extensions"], Compass.shared_extension_paths
|
||||
end
|
||||
|
||||
def test_shared_extension_paths_with_nil_home
|
||||
ENV["HOME"] = nil
|
||||
assert_equal [], Compass.shared_extension_paths
|
||||
end
|
||||
|
||||
def test_shared_extension_paths_with_file_home
|
||||
ENV["HOME"] = __FILE__
|
||||
assert_equal [], Compass.shared_extension_paths
|
||||
end
|
||||
|
||||
def test_shared_extension_paths_with_relative_home
|
||||
ENV["HOME"] = "."
|
||||
assert_equal [], Compass.shared_extension_paths
|
||||
end
|
||||
|
||||
end
|
||||
Loading…
Reference in New Issue
Block a user