Fixed Chrome warning and updated docs

README.md

@@ -55,7 +55,7 @@ CSS:
 	height: 25px;
 	width: 25px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 2) {
+@media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3 / 2), (min--moz-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 144dppx) {
 	.sprite2 {
 		background-image: url('../images/icons-2x-s93dce01c9d.png');
 		background-position: 0 -25px;
@@ -93,7 +93,7 @@ CSS:
 .background {
 	background-image: url('../images/background.gif');
 }
-@media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 2) {
+@media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3 / 2), (min--moz-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 144dppx) {
 	.background {
 		background-image: url('../images/background-2x.gif');
 		background-size: 25px 25px;

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "Retina-sprites-for-Compass",
-  "version": "1.0",
+  "version": "1.1",
   "homepage": "http://www.gayadesign.com/diy/retina-sprites-for-compass/",
   "authors": [
     "Gaya Kessler <[email protected]>"

example/assets/config.rb

@@ -9,15 +9,12 @@
 javascripts_dir = "javascripts"
 
 # You can select your preferred output style here (can be overridden via the command line):
-output_style = :compact
-# Na dev :compressed
+output_style = :expanded
 
 # To disable debugging comments that display the original location of your selectors. Uncomment:
 line_comments = false
 
 # Obviously
 preferred_syntax = :scss
 
-line_comments = false # by Compass.app 
-sass_options = {:debug_info=>false} # by Compass.app 
-output_style = :compressed # by Compass.app 
+line_comments = false

example/assets/css/screen.css

@@ -1 +1,171 @@
-html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}html{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}q,blockquote{quotes:none}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}a img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}body{color:#000;background-color:#fff;font-family:sans-serif;font-size:14px;padding:10px}h1{font-weight:bold;font-size:24px}p{padding:10px 0px}.sprite1,.sprite2,.sprite3{margin:10px 0px;float:left;margin-right:20px}.sprite1{background-image:url('../images/icons-s44ec97e90e.png');background-position:0 0;background-repeat:no-repeat;overflow:hidden;display:block;height:25px;width:25px}@media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 2){.sprite1{background-image:url('../images/icons-2x-s93dce01c9d.png');background-position:0 0;background-size:45px 95px;height:25px;width:25px}}.sprite2{background-image:url('../images/icons-s44ec97e90e.png');background-position:0 -25px;background-repeat:no-repeat;overflow:hidden;display:block;height:25px;width:25px}@media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 2){.sprite2{background-image:url('../images/icons-2x-s93dce01c9d.png');background-position:0 -25px;background-size:45px 95px;height:25px;width:25px}}.sprite3{background-image:url('../images/icons-s44ec97e90e.png');background-position:0 -50px;background-repeat:no-repeat;overflow:hidden;display:block;height:45px;width:45px}@media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 2){.sprite3{background-image:url('../images/icons-2x-s93dce01c9d.png');background-position:0 -50px;background-size:45px 95px;height:45px;width:45px}}.background{width:100%;height:200px;background-image:url('../images/background.gif?1358162797');margin:10px 0px;clear:both}@media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 2){.background{background-image:url('../images/background-2x.gif?1358163503');background-size:25px 25px}}
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+
+html {
+  line-height: 1;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+caption, th, td {
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle;
+}
+
+q, blockquote {
+  quotes: none;
+}
+q:before, q:after, blockquote:before, blockquote:after {
+  content: "";
+  content: none;
+}
+
+a img {
+  border: none;
+}
+
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
+  display: block;
+}
+
+/*
+ * Retina Sprites for Compass
+ * by:              Gaya Kessler
+ * last update:     03/11/14
+ *
+ * Usage:
+ * 1. create two folders in your image directory (in this case 'icons' and 'icons-2x').
+ * 2. adjust the foldernames defined below if you use different names.
+ * 3. create sprite images for pixel ratio 1 screens and put them in the first folder.
+ * 4. create sprite images for pixel ratio 2 screens and put them in the second folder, use the same filenames.
+ * 5. use the sprite-image in your Sass/Scss using: '@include use-sprite(<sprite-name>)'
+ */
+/*
+ * Retina Backgrounds for Compass
+ * by:              Gaya Kessler
+ * last update:     03/11/14
+ *
+ * Usage:
+ * 1. create background image for pixel ratio 1 screens and put it somewhere in your images folder.
+ * 2. create background image for pixel ratio 2 screens and put it somewhere in your images folder.
+ * 3. include the background-image property in your Sass/Scss using: '@include background-retina(<ratio-1-imagefile>, <ratio-2-imagefile>)'
+ */
+body {
+  color: #000;
+  background-color: #fff;
+  font-family: sans-serif;
+  font-size: 14px;
+  padding: 10px;
+}
+
+h1 {
+  font-weight: bold;
+  font-size: 24px;
+}
+
+p {
+  padding: 10px 0px;
+}
+
+.sprite1, .sprite2, .sprite3 {
+  margin: 10px 0px;
+  float: left;
+  margin-right: 20px;
+}
+
+.sprite1 {
+  background-image: url('../images/icons-s44ec97e90e.png');
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  overflow: hidden;
+  display: block;
+  height: 25px;
+  width: 25px;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3 / 2), (min--moz-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 144dppx) {
+  .sprite1 {
+    background-image: url('../images/icons-2x-s93dce01c9d.png');
+    background-size: 45px 95px;
+    background-position: 0 0;
+    height: 25px;
+    width: 25px;
+  }
+}
+
+.sprite2 {
+  background-image: url('../images/icons-s44ec97e90e.png');
+  background-position: 0 -25px;
+  background-repeat: no-repeat;
+  overflow: hidden;
+  display: block;
+  height: 25px;
+  width: 25px;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3 / 2), (min--moz-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 144dppx) {
+  .sprite2 {
+    background-image: url('../images/icons-2x-s93dce01c9d.png');
+    background-size: 45px 95px;
+    background-position: 0 -25px;
+    height: 25px;
+    width: 25px;
+  }
+}
+
+.sprite3 {
+  background-image: url('../images/icons-s44ec97e90e.png');
+  background-position: 0 -50px;
+  background-repeat: no-repeat;
+  overflow: hidden;
+  display: block;
+  height: 45px;
+  width: 45px;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3 / 2), (min--moz-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 144dppx) {
+  .sprite3 {
+    background-image: url('../images/icons-2x-s93dce01c9d.png');
+    background-size: 45px 95px;
+    background-position: 0 -50px;
+    height: 45px;
+    width: 45px;
+  }
+}
+
+.background {
+  width: 100%;
+  height: 200px;
+  background-image: url('../images/background.gif?1382707264');
+  margin: 10px 0px;
+  clear: both;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3 / 2), (min--moz-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 144dppx) {
+  .background {
+    background-image: url('../images/background-2x.gif?1382707264');
+    background-size: 25px 25px;
+  }
+}

example/assets/sass/screen.scss

@@ -1,8 +1,8 @@
 @import "compass/reset";
 @import "compass/css3";
 
-@import "partials/retina-sprites";
-@import "partials/retina-background-image";
+@import "../../../src/retina-sprites";
+@import "../../../src/retina-background-image";
 
 body {
 	color: #000;

src/_retina-background-image.scss

@@ -1,19 +1,24 @@
 /*
  * Retina Backgrounds for Compass
  * by:              Gaya Kessler
- * last update:     10/25/13
+ * last update:     03/11/14
  *
  * Usage:
  * 1. create background image for pixel ratio 1 screens and put it somewhere in your images folder.
  * 2. create background image for pixel ratio 2 screens and put it somewhere in your images folder.
  * 3. include the background-image property in your Sass/Scss using: '@include background-retina(<ratio-1-imagefile>, <ratio-2-imagefile>)'
  */
 
-@mixin background-retina($normal, $retina) {
+@mixin background-retina($normal, $retina, $contain: false) {
     background-image: image-url($normal);
 
-    @media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3/2), (min--moz-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 144dpi) {
+    @media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3/2), (min--moz-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 144dppx) {
         background-image: image-url($retina);
-        background-size: (image-width($retina) / 2) (image-height($retina) / 2);
+
+        @if $contain == true {
+            background-size: contain;
+        } @else {
+            background-size: (image-width($retina) / 2) (image-height($retina) / 2);
+        }
     }
 }

src/_retina-sprites.scss

@@ -1,7 +1,7 @@
 /*
  * Retina Sprites for Compass
  * by:              Gaya Kessler
- * last update:     10/25/13
+ * last update:     03/11/14
  *
  * Usage:
  * 1. create two folders in your image directory (in this case 'icons' and 'icons-2x').
@@ -25,7 +25,7 @@ $icons-2x: sprite-map("icons-2x/*.png", $layout: smart);
     height: image-height(sprite-file($icons, $sprite));
     width: image-width(sprite-file($icons, $sprite));
 
-    @media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3/2), (min--moz-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 144dpi) {
+    @media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3/2), (min--moz-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 144dppx) {
         background-image: sprite-url($icons-2x);
         background-size: (image-width(sprite-path($icons-2x)) / 2) (image-height(sprite-path($icons-2x)) / 2);
         background-position: round(nth(sprite-position($icons-2x, $sprite), 1) / 2) round(nth(sprite-position($icons-2x, $sprite), 2) / 2);