sass/ezy/_sprites.scss in ezy-0.2.0 vs sass/ezy/_sprites.scss in ezy-0.2.6.alpha
- old
+ new
@@ -1,19 +1,19 @@
+@import "settings";
// ---------------------------------------------------------------------------
// Sprites
// Making good use of http://compass-style.org/reference/compass/helpers/sprites/
//
// If you are concerned about the amount of "unchanged" and "created" statuses
// when compiling your SCSS, read this thread:
// https://github.com/chriseppstein/compass/issues/897
// ---------------------------------------------------------------------------
-// Setting defaults
+// Global variable for device pixel ratio
$min-device-pixel-ratio: 2 !default;
-$legacy-selector: ".no-media-queries" !default;
// ---------------------------------------------------------------------------
// Sprite map store
$sprite-maps: ();
@@ -158,38 +158,22 @@
// ---------------------------------------------------------------------------
// @mixin at-retina
//
// Retina media query mixin
-@mixin at-retina( $ratio: 2, $query: false ) {
- @if $query {
- // Extending retina media query with breakpoint query
- @media
- only screen and (-webkit-min-device-pixel-ratio: #{ $ratio }) and #{ $query },
- only screen and ( min--moz-device-pixel-ratio: #{ $ratio }) and #{ $query },
- only screen and ( -moz-min-device-pixel-ratio: #{ $ratio }) and #{ $query },
- only screen and ( -ms-min-device-pixel-ratio: #{ $ratio }) and #{ $query },
- only screen and ( -o-min-device-pixel-ratio: #{ $ratio }/1) and #{ $query },
- only screen and ( min-device-pixel-ratio: #{ $ratio }) and #{ $query },
- only screen and ( min-resolution: #{ $ratio * 96 }dpi) and #{ $query },
- only screen and ( min-resolution: #{ $ratio }dppx) and #{ $query } {
- @content;
- }
- } @else {
- @media
- only screen and (-webkit-min-device-pixel-ratio: #{ $ratio }),
- only screen and ( min--moz-device-pixel-ratio: #{ $ratio }),
- only screen and ( -moz-min-device-pixel-ratio: #{ $ratio }),
- only screen and ( -ms-min-device-pixel-ratio: #{ $ratio }),
- only screen and ( -o-min-device-pixel-ratio: #{ $ratio }/1),
- only screen and ( min-device-pixel-ratio: #{ $ratio }),
- only screen and ( min-resolution: #{ $ratio * 96 }dpi),
- only screen and ( min-resolution: #{ $ratio }dppx) {
- @content;
- }
+@mixin at-retina( $ratio: 2 ) {
+ @media
+ only screen and (-webkit-min-device-pixel-ratio: #{ $ratio }),
+ only screen and ( min--moz-device-pixel-ratio: #{ $ratio }),
+ only screen and ( -moz-min-device-pixel-ratio: #{ $ratio }),
+ only screen and ( -ms-min-device-pixel-ratio: #{ $ratio }),
+ only screen and ( -o-min-device-pixel-ratio: #{ $ratio }/1),
+ only screen and ( min-device-pixel-ratio: #{ $ratio }),
+ only screen and ( min-resolution: #{ $ratio * 96 }dpi),
+ only screen and ( min-resolution: #{ $ratio }dppx) {
+ @content;
}
-
}
// ---------------------------------------------------------------------------
// @mixin make-sprite
//
@@ -235,29 +219,30 @@
$repeat: $repeat-retina,
$layout: $layout-retina,
$clean-up: $clean-up-retina
);
}
- $sprite-settings: $name $sprite $sprite-retina $position $position-retina $repeat $repeat-retina;
- @if $sprite-maps == () {
- $sprite-maps: ($sprite-settings);
- } @else {
- $sprite-maps: $sprite-maps, ($sprite-settings);
- }
+
+ $sprite-maps: append( $sprite-maps, ( $name $sprite $sprite-retina $position $position-retina $repeat $repeat-retina ), comma );
+
%sprite-placeholder-#{ $name } {
background-image: sprite-url( $sprite );
background-repeat: $repeat;
+ // background-position-x: $position;
}
%sprite-placeholder-#{ $name }-retina {
@if $sprite-retina {
@include at-retina( $min-device-pixel-ratio ) {
/* Retina sprite */
background-image: sprite-url( $sprite-retina );
background-size: image-width( sprite-path( $sprite-retina ) )/2 auto;
@if $repeat-retina != $repeat {
background-repeat: $repeat-retina;
}
+ // @if $position-retina != $position {
+ // background-position-x: $position-retina;
+ // }
}
}
}
}
}
@@ -272,13 +257,11 @@
$image, // image to use
$offset-x: 0, // background offset x (optional)
$offset-y: 0, // background offset y (optional)
$use-retina: true, // wether to use retina on hi-res screens (optional)
$offset-x-retina: null, // background offset x on retina (optional)
- $offset-y-retina: null, // background offset y on retina (optional)
- $at-breakpoint: false, // media query
- $legacy-support: false // fallback for media query
+ $offset-y-retina: null // background offset y on retina (optional)
) {
@if $offset-x-retina == null { $offset-x-retina: $offset-x; }
@if $offset-y-retina == null { $offset-y-retina: $offset-y; }
@@ -286,65 +269,29 @@
$retina-map: $use-retina;
@if $use-retina {
$retina-map: return-sprite-map( $name, $retina: true );
}
- // Catching media breakpoints from set-breakpoint
- @if type-of( $at-breakpoint ) == "list" {
- @if ( not $legacy-support ) and length( $at-breakpoint ) > 1 {
- // Inheriting legacy support setting from set-breakpoint
- $legacy-support: nth( $at-breakpoint, 2 );
- }
- $at-breakpoint: nth( $at-breakpoint, 1 );
- }
-
@if $map and $image {
$pos: sprite-position($map, $image);
$pos-x: return-offset( nth( $pos, 1 ), $offset-x, "$offset-x must be a number, a pixel value or a percentage!" );
$pos-y: return-offset( nth( $pos, 2 ), $offset-y, "$offset-y must be a number, a pixel value or a percentage!" );
-
- @if $at-breakpoint {
- @media #{ $at-breakpoint } {
- background-position: $pos-x $pos-y;
- // Settings that would usually be set by extending %sprite-placeholder-#{ $name }
- // @extend is not possible from within a media query
- background-image: sprite-url( $map );
- background-repeat: return-sprite-setting( $name, 6 );
- }
- } @else {
- background-position: $pos-x $pos-y;
- @extend %sprite-placeholder-#{ $name };
- }
-
- @if $legacy-support {
- #{ $legacy-selector } & {
- background-position: $pos-x $pos-y;
- @extend %sprite-placeholder-#{ $name };
- }
- }
-
+ background-position: $pos-x $pos-y;
@if $retina-map {
- @include at-retina( $min-device-pixel-ratio, $at-breakpoint ) {
+ @include at-retina( $min-device-pixel-ratio ) {
/* Retina sprite */
$pos: sprite-position($retina-map, $image);
$pos-x: return-offset( nth( $pos, 1 )/2, $offset-x-retina, "$offset-x-retina must be a number, a pixel value or a percentage!" );
$pos-y: return-offset( nth( $pos, 2 )/2, $offset-y-retina, "$offset-y-retina must be a number, a pixel value or a percentage!" );
background-position: $pos-x $pos-y;
- @if $at-breakpoint {
- // Settings that would usually be set by extending %sprite-placeholder-#{ $name }
- // @extend is not possible from within a media query
- background-image: sprite-url( $retina-map );
- background-size: image-width( sprite-path( $retina-map ) )/2 auto;
- @if return-sprite-setting( $name, 7 ) != return-sprite-setting( $name, 6 ) {
- background-repeat: return-sprite-setting( $name, 7 );
- }
- }
}
- @if ( not $at-breakpoint ) {
- // Set to optional because placeholder only exists if a retina sprite is set
- @extend %sprite-placeholder-#{ $name }-retina !optional;
- }
}
+ }
+
+ @extend %sprite-placeholder-#{ $name };
+ @if $use-retina {
+ // Set to optional because placeholder only exists if a retina sprite is set
+ @extend %sprite-placeholder-#{ $name }-retina !optional;
}
}