diff --git a/doc-src/content/help/tutorials/spriting.markdown b/doc-src/content/help/tutorials/spriting.markdown index 235777ef..fa411b6f 100644 --- a/doc-src/content/help/tutorials/spriting.markdown +++ b/doc-src/content/help/tutorials/spriting.markdown @@ -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. @@ -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. \ No newline at end of file +Compass will automatically detect its presence. diff --git a/doc-src/content/help/tutorials/spriting/magic-selectors.markdown b/doc-src/content/help/tutorials/spriting/magic-selectors.markdown index a0d4cb9b..a47c1331 100644 --- a/doc-src/content/help/tutorials/spriting/magic-selectors.markdown +++ b/doc-src/content/help/tutorials/spriting/magic-selectors.markdown @@ -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) } - - diff --git a/features/command_line.feature b/features/command_line.feature index f0ffbba3..841f46e1 100644 --- a/features/command_line.feature +++ b/features/command_line.feature @@ -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 diff --git a/lib/compass.rb b/lib/compass.rb index 97ec92b7..9ea77ca9 100644 --- a/lib/compass.rb +++ b/lib/compass.rb @@ -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 diff --git a/test/units/compass_module_test.rb b/test/units/compass_module_test.rb new file mode 100644 index 00000000..0e9e530b --- /dev/null +++ b/test/units/compass_module_test.rb @@ -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