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

Fixes #449. Accept and honor offsets in selectors

Browse Source
This commit is contained in:
Caged 2011-07-02 13:27:32 -07:00
parent 2124003550
commit a08d0319d0
5 changed files with 39 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Gemfile.lock
View File

@ -7,7 +7,7 @@ GIT
PATH
remote: .
specs:
compass (0.11.3.rails.0.dfb7c70)
compass (0.11.3.rails.0.2124003)
chunky_png (~> 1.2)
fssm (>= 0.2.7)
sass (~> 3.1)

10
frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss
View File

@ -30,18 +30,18 @@ $disable-magic-sprite-selectors:false !default;
@include sprite-dimensions($map, $sprite);
}
@if not $disable-magic-sprite-selectors {
@include sprite-selectors($map, $sprite, $sprite);
@include sprite-selectors($map, $sprite, $sprite, $offset-x, $offset-y);
}
}
// Include the selectors for the `$sprite` given the `$map` and the
// `$full-sprite-name`
// @private
@mixin sprite-selectors($map, $sprite-name, $full-sprite-name) {
@mixin sprite-selectors($map, $sprite-name, $full-sprite-name, $offset-x: 0, $offset-y: 0) {
@each $selector in $sprite-selectors {
@if sprite_has_selector($map, $sprite-name, $selector) {
&:#{$selector}, &.#{$full-sprite-name}_#{$selector}, &.#{$full-sprite-name}-#{$selector} {
@include sprite-background-position($map, "#{$sprite-name}_#{$selector}");
@include sprite-background-position($map, "#{$sprite-name}_#{$selector}", $offset-x, $offset-y);
}
}
}
@ -53,13 +53,13 @@ $disable-magic-sprite-selectors:false !default;
// If a base class is provided, then each class will extend it.
//
// If `$dimensions` is `true`, the sprite dimensions will specified.
@mixin sprites($map, $sprite-names, $base-class: false, $dimensions: false, $prefix: sprite-map-name($map)) {
@mixin sprites($map, $sprite-names, $base-class: false, $dimensions: false, $prefix: sprite-map-name($map), $offset-x: 0, $offset-y: 0) {
@each $sprite-name in $sprite-names {
@if sprite_does_not_have_parent($map, $sprite-name) {
$full-sprite-name: "#{$prefix}-#{$sprite-name}";
.#{$full-sprite-name} {
@if $base-class { @extend #{$base-class}; }
@include sprite($map, $sprite-name, $dimensions);
@include sprite($map, $sprite-name, $dimensions, $offset-x, $offset-y);
}
}
}

8
lib/compass/sprite_importer.rb
View File

@ -132,13 +132,13 @@ $#{name}-layout:vertical !default;
@include sprite($#{name}-sprites, $name, $dimensions, $offset-x, $offset-y)
}
@mixin #{name}-sprites($sprite-names, $dimensions: $#{name}-sprite-dimensions, $prefix: sprite-map-name($#{name}-sprites)) {
@include sprites($#{name}-sprites, $sprite-names, $#{name}-sprite-base-class, $dimensions, $prefix)
@mixin #{name}-sprites($sprite-names, $dimensions: $#{name}-sprite-dimensions, $prefix: sprite-map-name($#{name}-sprites), $offset-x: 0, $offset-y: 0) {
@include sprites($#{name}-sprites, $sprite-names, $#{name}-sprite-base-class, $dimensions, $prefix, $offset-x, $offset-y)
}
// Generates a class for each sprited image.
@mixin all-#{name}-sprites($dimensions: $#{name}-sprite-dimensions, $prefix: sprite-map-name($#{name}-sprites)) {
@include #{name}-sprites(#{sprite_names(uri).join(" ")}, $dimensions, $prefix);
@mixin all-#{name}-sprites($dimensions: $#{name}-sprite-dimensions, $prefix: sprite-map-name($#{name}-sprites), $offset-x: 0, $offset-y: 0) {
@include #{name}-sprites(#{sprite_names(uri).join(" ")}, $dimensions, $prefix, $offset-x, $offset-y);
}
SCSS
end

30
test/integrations/sprites_test.rb
View File

@ -448,7 +448,7 @@ class SpritesTest < Test::Unit::TestCase
CSS
end
it "should render corret sprite with css selectors via issue#248" do
it "should render correct sprite with css selectors via issue#248" do
css = render <<-SCSS
@import "selectors/*.png";
@include all-selectors-sprites;
@ -473,7 +473,32 @@ class SpritesTest < Test::Unit::TestCase
CSS
end
it "should render corret sprite with css selectors via magic mixin" do
it "should honor offsets when rendering selectors via issue#449" do
css = render <<-SCSS
@import "selectors/*.png";
@include all-selectors-sprites($offset-x: 20px, $offset-y: 20px);
SCSS
assert_correct css, <<-CSS
.selectors-sprite, .selectors-ten-by-ten {
background: url('/selectors-sedfef809e2.png') no-repeat;
}
.selectors-ten-by-ten {
background-position: 20px 20px;
}
.selectors-ten-by-ten:hover, .selectors-ten-by-ten.ten-by-ten_hover, .selectors-ten-by-ten.ten-by-ten-hover {
background-position: 20px 0;
}
.selectors-ten-by-ten:target, .selectors-ten-by-ten.ten-by-ten_target, .selectors-ten-by-ten.ten-by-ten-target {
background-position: 20px -10px;
}
.selectors-ten-by-ten:active, .selectors-ten-by-ten.ten-by-ten_active, .selectors-ten-by-ten.ten-by-ten-active {
background-position: 20px 10px;
}
CSS
end
it "should render correct sprite with css selectors via magic mixin" do
css = render <<-SCSS
@import "selectors/*.png";
a {
@ -500,6 +525,7 @@ class SpritesTest < Test::Unit::TestCase
CSS
end
it "should not render corret sprite with css selectors via magic mixin" do
css = render <<-SCSS
@import "selectors/*.png";