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:
|
For this tutorial, let's imagine that in your project's image folder there are four icons:
|
||||||
|
|
||||||
* `images/icon/new.png`
|
* `images/my-icons/new.png`
|
||||||
* `images/icon/edit.png`
|
* `images/my-icons/edit.png`
|
||||||
* `images/icon/save.png`
|
* `images/my-icons/save.png`
|
||||||
* `images/icon/delete.png`
|
* `images/my-icons/delete.png`
|
||||||
|
|
||||||
Each is an icon that is 32px square.
|
Each is an icon that is 32px square.
|
||||||
<a name="basic-usage"></a>
|
<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:
|
The simplest way to use these icon sprites is to let compass give you a class for each sprite:
|
||||||
|
|
||||||
@import "icon/*.png";
|
@import "my-icons/*.png";
|
||||||
@include all-icon-sprites;
|
@include all-my-icons-sprites;
|
||||||
|
|
||||||
And you'll get the following CSS output:
|
And you'll get the following CSS output:
|
||||||
|
|
||||||
.icon-sprite,
|
.my-icons-sprite,
|
||||||
.icon-delete,
|
.my-icons-delete,
|
||||||
.icon-edit,
|
.my-icons-edit,
|
||||||
.icon-new,
|
.my-icons-new,
|
||||||
.icon-save { background: url('/images/icon-s34fe0604ab.png') no-repeat; }
|
.my-icons-save { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; }
|
||||||
|
|
||||||
.icon-delete { background-position: 0 0; }
|
.my-icons-delete { background-position: 0 0; }
|
||||||
.icon-edit { background-position: 0 -32px; }
|
.my-icons-edit { background-position: 0 -32px; }
|
||||||
.icon-new { background-position: 0 -64px; }
|
.my-icons-new { background-position: 0 -64px; }
|
||||||
.icon-save { background-position: 0 -96px; }
|
.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
|
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
|
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.
|
****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 `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.
|
on the name of the folder in which you've placed your icons.
|
||||||
|
|
||||||
@import "icon/*.png";
|
@import "my-icons/*.png";
|
||||||
|
|
||||||
.actions {
|
.actions {
|
||||||
.new { @include icon-sprite(new); }
|
.new { @include my-icons-sprite(new); }
|
||||||
.edit { @include icon-sprite(edit); }
|
.edit { @include my-icons-sprite(edit); }
|
||||||
.save { @include icon-sprite(save); }
|
.save { @include my-icons-sprite(save); }
|
||||||
.delete { @include icon-sprite(delete); }
|
.delete { @include my-icons-sprite(delete); }
|
||||||
}
|
}
|
||||||
|
|
||||||
And your stylesheet will compile to:
|
And your stylesheet will compile to:
|
||||||
|
|
||||||
.icon-sprite,
|
.my-icons-sprite,
|
||||||
.actions .new,
|
.actions .new,
|
||||||
.actions .edit,
|
.actions .edit,
|
||||||
.actions .save,
|
.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 .new { background-position: 0 -64px; }
|
||||||
.actions .edit { background-position: 0 -32px; }
|
.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
|
you would like to avoid the magic, you can use compass to generate an import for you. On the
|
||||||
command line:
|
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
|
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.
|
output filename using the `-f` option and the syntax will be inferred from the extension.
|
||||||
|
|||||||
@ -5,70 +5,69 @@ crumb: Magic Selectors
|
|||||||
classnames:
|
classnames:
|
||||||
- tutorial
|
- tutorial
|
||||||
---
|
---
|
||||||
#Sprite Tutorial
|
# Sprite Tutorial
|
||||||
<%= sprite_tutorial_links %>
|
<%= sprite_tutorial_links %>
|
||||||
|
|
||||||
## Magic Selectors
|
## 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:
|
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`
|
* `my-buttons/glossy.png`
|
||||||
* `selectors/ten-by-ten_hover.png`
|
* `my-buttons/glossy_hover.png`
|
||||||
* `selectors/ten-by-ten_active.png`
|
* `my-buttons/glossy_active.png`
|
||||||
* `selectors/ten-by-ten_target.png`
|
* `my-buttons/glossy_target.png`
|
||||||
|
|
||||||
Now in our sass file we add:
|
Now in our sass file we add:
|
||||||
|
|
||||||
@import "selectors/*.png";
|
@import "my-buttons/*.png";
|
||||||
|
|
||||||
a {
|
a {
|
||||||
@include selectors-sprite(ten-by-ten)
|
@include my-buttons-sprite(glossy)
|
||||||
}
|
}
|
||||||
|
|
||||||
And your stylesheet will compile to:
|
And your stylesheet will compile to:
|
||||||
|
|
||||||
.selectors-sprite, a {
|
.my-buttons-sprite, a {
|
||||||
background: url('/selectors-sedfef809e2.png') no-repeat;
|
background: url('/my-buttons-sedfef809e2.png') no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
background-position: 0 0;
|
background-position: 0 0;
|
||||||
}
|
}
|
||||||
a:hover, a.ten-by-ten_hover, a.ten-by-ten-hover {
|
a:hover, a.glossy_hover, a.glossy-hover {
|
||||||
background-position: 0 -20px;
|
background-position: 0 -40px;
|
||||||
}
|
}
|
||||||
a:target, a.ten-by-ten_target, a.ten-by-ten-target {
|
a:target, a.glossy_target, a.glossy-target {
|
||||||
background-position: 0 -30px;
|
background-position: 0 -60px;
|
||||||
}
|
}
|
||||||
a:active, a.ten-by-ten_active, a.ten-by-ten-active {
|
a:active, a.glossy_active, a.glossy-active {
|
||||||
background-position: 0 -10px;
|
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 {
|
.my-buttons-sprite, .my-buttons-glossy {
|
||||||
background: url('/selectors-sedfef809e2.png') no-repeat;
|
background: url('/my-buttons-sedfef809e2.png') no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectors-ten-by-ten {
|
.my-buttons-glossy {
|
||||||
background-position: 0 0;
|
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;
|
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
|
## 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 {
|
a {
|
||||||
$disable-magic-sprite-selectors:true;
|
$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
|
Given I am using the existing project in test/fixtures/stylesheets/compass
|
||||||
When I run: compass stats
|
When I run: compass stats
|
||||||
Then I am told statistics for each file:
|
Then I am told statistics for each file:
|
||||||
| Filename | Rules | Properties | Mixins Defs | Mixins Used | CSS Selectors | CSS Properties |
|
| Filename | Rules | Properties | Mixins Defs | Mixins Used | Filesize | CSS Selectors | CSS Properties | CSS Filesize |
|
||||||
| sass/border_radius.scss | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
| sass/border_radius.scss | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||||
| sass/box.sass | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
| sass/box.sass | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||||
| sass/fonts.sass | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
| sass/fonts.sass | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||||
| sass/gradients.sass | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
| sass/gradients.sass | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||||
| sass/image_size.sass | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
| sass/image_size.sass | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||||
| sass/images.scss | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
| sass/images.scss | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||||
| sass/layout.sass | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
| sass/layout.sass | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||||
| sass/legacy_clearfix.scss | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
| sass/legacy_clearfix.scss | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||||
| sass/lists.scss | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
| sass/lists.scss | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||||
| sass/print.sass | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
| sass/print.sass | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||||
| sass/reset.sass | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
| sass/reset.sass | \d+ | \d+ | \d+ | \d+ | \d+ K?B | \d+ | \d+ | \d+ K?B |
|
||||||
| sass/utilities.scss | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
| 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 |
|
||||||
| Total.* | \d+ | \d+ | \d+ | \d+ | \d+ | \d+ |
|
|
||||||
|
|
||||||
@listframeworks
|
@listframeworks
|
||||||
Scenario: List frameworks registered with compass
|
Scenario: List frameworks registered with compass
|
||||||
|
|||||||
@ -21,6 +21,8 @@ module Compass
|
|||||||
else
|
else
|
||||||
[]
|
[]
|
||||||
end
|
end
|
||||||
|
rescue ArgumentError # If HOME is relative
|
||||||
|
[]
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
module_function :base_directory, :lib_directory, :shared_extension_paths
|
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