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

refactored sprite selectors

Browse Source
This commit is contained in:
Scott Davis 2011-03-28 17:08:53 -04:00
parent 638e7e2c51
commit 7571d4af93
3 changed files with 34 additions and 10 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 PATH
remote: . remote: .
specs: specs:
compass (0.11.beta.4.b0bfb63) compass (0.11.beta.4.29656ea)
chunky_png (~> 1.1.0) chunky_png (~> 1.1.0)
sass (>= 3.1.0.alpha.249) sass (>= 3.1.0.alpha.249)

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

@ -22,16 +22,17 @@
@if $dimensions { @if $dimensions {
@include sprite-dimensions($map, $sprite); @include sprite-dimensions($map, $sprite);
} }
@include sprite-selectors($map, $sprite, $sprite);
} }
// Include the selectors for the `$sprite` given the `$map` and the // Include the selectors for the `$sprite` given the `$map` and the
// `$full-sprite-name` // `$full-sprite-name`
// @private // @private
@mixin sprite_selectors($map, $sprite-name, $full-sprite-name) { @mixin sprite-selectors($map, $sprite-name, $full-sprite-name) {
@each $selector in $sprite-selectors { @each $selector in $sprite-selectors {
@if sprite_has_selector($map, $sprite-name, $selector) { @if sprite_has_selector($map, $sprite-name, $selector) {
.#{$full-sprite-name}:#{$selector}, .#{$full-sprite-name}_#{$selector}, .#{$full-sprite-name}-#{$selector} { &:#{$selector}, &.#{$full-sprite-name}_#{$selector}, &.#{$full-sprite-name}-#{$selector} {
@include sprite($map, "#{$sprite-name}_#{$selector}"); @include sprite-background-position($map, "#{$sprite-name}_#{$selector}");
} }
} }
} }
@ -51,7 +52,6 @@
@if $base-class { @extend #{$base-class}; } @if $base-class { @extend #{$base-class}; }
@include sprite($map, $sprite-name, $dimensions); @include sprite($map, $sprite-name, $dimensions);
} }
@include sprite_selectors($map, $sprite-name, $full-sprite-name);
} }
} }
} }

34
spec/sprites_spec.rb
View File

@ -480,16 +480,40 @@ describe Compass::Sprites do
.selectors-ten-by-ten { .selectors-ten-by-ten {
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 {
.selectors-ten-by-ten:hover, .selectors-ten-by-ten_hover, .selectors-ten-by-ten-hover {
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 {
.selectors-ten-by-ten:target, .selectors-ten-by-ten_target, .selectors-ten-by-ten-target {
background-position: 0 -30px; 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;
}
CSS
end
it "should render corret sprite with css selectors via magic mixin" do
css = render <<-SCSS
@import "selectors/*.png";
a {
@include selectors_sprite(ten-by-ten)
}
SCSS
css.should == <<-CSS
.selectors-sprite, a {
background: url('/selectors-edfef809e2.png') no-repeat;
}
.selectors-ten-by-ten:active, .selectors-ten-by-ten_active, .selectors-ten-by-ten-active { a {
background-position: 0 0;
}
a:hover, a.ten-by-ten_hover, a.ten-by-ten-hover {
background-position: 0 -20px;
}
a:target, a.ten-by-ten_target, a.ten-by-ten-target {
background-position: 0 -30px;
}
a:active, a.ten-by-ten_active, a.ten-by-ten-active {
background-position: 0 -10px; background-position: 0 -10px;
} }
CSS CSS