Skip to content

Commit 3ddba37

Browse files
committed
* Remove Imported injection from compass core
* Move Sprite stylesheets into sprite gem * Updated tests
1 parent 409a7b0 commit 3ddba37

File tree

6 files changed

+175
-0
lines changed

6 files changed

+175
-0
lines changed
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import "sprites/base";
2+
@import "sprites/sprite-img";
Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
// Determines those states for which you want to enable magic sprite selectors
2+
$sprite-selectors: hover, target, active, focus !default;
3+
4+
// Set the width and height of an element to the original
5+
// dimensions of an image before it was included in the sprite.
6+
@mixin sprite-dimensions($map, $sprite) {
7+
height: image-height(sprite-file($map, $sprite));
8+
width: image-width(sprite-file($map, $sprite));
9+
}
10+
11+
// Set the background position of the given sprite `$map` to display the
12+
// sprite of the given `$sprite` name. You can move the image relative to its
13+
// natural position by passing `$offset-x` and `$offset-y`.
14+
// The background-position will be returned in pixels. By passing `true
15+
// for `$use_percentages`, you get percentages instead.
16+
@mixin sprite-background-position($map, $sprite, $offset-x: 0, $offset-y: 0,
17+
$use-percentages: false) {
18+
background-position: sprite-position($map, $sprite, $offset-x, $offset-y,
19+
$use-percentages);
20+
}
21+
22+
23+
// Determines if you want to include magic selectors in your sprites
24+
$disable-magic-sprite-selectors: false !default;
25+
26+
// Set this to underscore if you prefer
27+
$default-sprite-separator: "-" !default;
28+
29+
// Include the position and (optionally) dimensions of this `$sprite`
30+
// in the given sprite `$map`. The sprite url should come from either a base
31+
// class or you can specify the `sprite-url` explicitly like this:
32+
//
33+
// background: $map no-repeat;
34+
@mixin sprite($map, $sprite, $dimensions: false, $offset-x: 0, $offset-y: 0,
35+
$use-percentages: false,
36+
$use-magic-selectors: not $disable-magic-sprite-selectors,
37+
$separator: $default-sprite-separator) {
38+
@include sprite-background-position($map, $sprite, $offset-x, $offset-y,
39+
$use-percentages);
40+
@if $dimensions {
41+
@include sprite-dimensions($map, $sprite);
42+
}
43+
@if $use-magic-selectors {
44+
@include sprite-selectors($map, $sprite, $sprite, $offset-x, $offset-y,
45+
$use-percentages, $separator);
46+
}
47+
}
48+
49+
// Include the selectors for the `$sprite` given the `$map` and the
50+
// `$full-sprite-name`
51+
// @private
52+
@mixin sprite-selectors($map, $sprite-name, $full-sprite-name, $offset-x: 0,
53+
$offset-y: 0, $use-percentages: false,
54+
$separator: $default-sprite-separator) {
55+
@each $state in $sprite-selectors {
56+
$sprite-class: "#{$full-sprite-name}#{$separator}#{$state}";
57+
@if sprite_has_selector($map, $sprite-name, $state) {
58+
@if sprite_has_valid_selector($sprite-class) {
59+
&:#{$state}, &.#{$sprite-class} {
60+
@include sprite-background-position($map, sprite_selector_file($map, $sprite-name, $state),
61+
$offset-x, $offset-y, $use-percentages);
62+
}
63+
}
64+
}
65+
}
66+
}
67+
68+
// Generates a class for each space separated name in `$sprite-names`.
69+
// The class will be of the form .<map-name>-<sprite-name>.
70+
//
71+
// If a base class is provided, then each class will extend it.
72+
//
73+
// If `$dimensions` is `true`, the sprite dimensions will specified.
74+
// Positions are returned in pixel units. Set `$use_percentages` to true to
75+
// instead get percentages.
76+
@mixin sprites($map, $sprite-names, $base-class: false, $dimensions: false,
77+
$prefix: sprite-map-name($map), $offset-x: 0, $offset-y: 0,
78+
$use-percentages: false,
79+
$separator: $default-sprite-separator) {
80+
@each $sprite-name in $sprite-names {
81+
@if sprite_does_not_have_parent($map, $sprite-name) {
82+
$full-sprite-name: "#{$prefix}#{$separator}#{$sprite-name}";
83+
@if sprite_has_valid_selector($full-sprite-name) {
84+
.#{$full-sprite-name} {
85+
@if $base-class { @extend #{$base-class}; }
86+
@include sprite($map, $sprite-name, $dimensions, $offset-x, $offset-y,
87+
$use-percentages, $separator: $separator);
88+
}
89+
}
90+
}
91+
}
92+
}
Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
@import "compass/typography/text/replacement";
2+
3+
// @doc off
4+
// Example 1:
5+
//
6+
// a.twitter
7+
// +sprite-img("icons-32.png", 1)
8+
// a.facebook
9+
// +sprite-img("icons-32png", 2)
10+
//
11+
// Example 2:
12+
//
13+
// a
14+
// +sprite-background("icons-32.png")
15+
// a.twitter
16+
// +sprite-column(1)
17+
// a.facebook
18+
// +sprite-row(2)
19+
// @doc on
20+
21+
$sprite-default-size: 32px !default;
22+
23+
$sprite-default-margin: 0px !default;
24+
25+
$sprite-image-default-width: $sprite-default-size !default;
26+
27+
$sprite-image-default-height: $sprite-default-size !default;
28+
29+
// Sets all the rules for a sprite from a given sprite image to show just one of the sprites.
30+
// To reduce duplication use a sprite-bg mixin for common properties and a sprite-select mixin for positioning.
31+
@mixin sprite-img($img, $col, $row: 1, $width: $sprite-image-default-width, $height: $sprite-image-default-height, $margin: $sprite-default-margin) {
32+
@include sprite-background($img, $width, $height);
33+
@include sprite-position($col, $row, $width, $height, $margin);
34+
}
35+
36+
// Sets rules common for all sprites, assumes you want a square, but allows a rectangular region.
37+
@mixin sprite-background($img, $width: $sprite-default-size, $height: $width) {
38+
@include sprite-background-rectangle($img, $width, $height);
39+
}
40+
41+
// Sets rules common for all sprites, assumes a rectangular region.
42+
@mixin sprite-background-rectangle($img, $width: $sprite-image-default-width, $height: $sprite-image-default-height) {
43+
background: image-url($img) no-repeat;
44+
width: $width;
45+
height: $height;
46+
overflow: hidden;
47+
}
48+
49+
// Allows horizontal sprite positioning optimized for a single row of sprites.
50+
@mixin sprite-column($col, $width: $sprite-image-default-width, $margin: $sprite-default-margin) {
51+
@include sprite-position($col, 1, $width, 0px, $margin);
52+
}
53+
54+
// Allows vertical sprite positioning optimized for a single column of sprites.
55+
@mixin sprite-row($row, $height: $sprite-image-default-height, $margin: $sprite-default-margin) {
56+
@include sprite-position(1, $row, 0px, $height, $margin);
57+
}
58+
59+
// Allows vertical and horizontal sprite positioning from a grid of equal dimensioned sprites.
60+
@mixin sprite-position($col, $row: 1, $width: $sprite-image-default-width, $height: $sprite-image-default-height, $margin: $sprite-default-margin) {
61+
$x: ($col - 1) * -$width - ($col - 1) * $margin;
62+
$y: ($row - 1) * -$height - ($row - 1) * $margin;
63+
background-position: $x $y;
64+
}
65+
66+
67+
68+
// Similar to 'sprite-replace-text-with-dimensions' but does not autmaticly set the demensions
69+
@mixin sprite-replace-text ($map, $sprite, $dimensions: false, $offset-x: 0, $offset-y: 0) {
70+
@include hide-text;
71+
@include sprite($map, $sprite, $dimensions, $offset-x, $offset-y);
72+
background-image: $map;
73+
background-repeat: no-repeat;
74+
}
75+
76+
// Similar to 'replace-text-with-dimensions' but with sprites
77+
// To use, create your sprite and then pass it in the `$map` param
78+
// The name of the image in the sprite folder should be `$img-name`
79+
@mixin sprite-replace-text-with-dimensions ($map, $sprite, $offset-x: 0, $offset-y: 0){
80+
@include sprite-replace-text ($map, $sprite, true, $offset-x, $offset-y);
81+
}

0 commit comments

Comments
 (0)