From 9dfd9c9720a7fff7edd52fa529c08968a7edb2eb Mon Sep 17 00:00:00 2001 From: Nicola Guo Date: Sun, 7 Jun 2015 23:44:23 -0400 Subject: [PATCH 1/2] Allow pixel ratio array for image mixin Allow pixel ratio array to better suit popular hi-res devices Default out put as @1.5x, @2x & @3x. User can specify the array for min_pixel_ratio when they use if they wanna change the default e.g. image: 'yourimage.png', 20px, 30px, 1.5; //will just output the @1.5x and the base. --- lib/nib/image.styl | 35 ++++++++++++++++++++--------------- 1 file changed, 20 insertions(+), 15 deletions(-) diff --git a/lib/nib/image.styl b/lib/nib/image.styl index 48672466..50813891 100644 --- a/lib/nib/image.styl +++ b/lib/nib/image.styl @@ -4,22 +4,27 @@ * * affected by github.com/LearnBoost/stylus/issues/1050 and * github.com/LearnBoost/stylus/issues/1038 ... refactor when those are closed + * + * Nicola Guo modified mixin to allow array pass in. + * Defaul will out put as @1.5x, @2x & @3x so as to have better resolution for popular hi-res devices. + * If wanna change the defaul, user can specify the array for min_pixel_ratio when they use. + * e.g. image: 'yourimage.png', 20px, 30px, 1.5; //will just output the @1.5x and the base. */ -image(path, w = auto, h = auto, min_pixel_ratio = 1.5) +image(path, w = auto, h = auto, min_pixel_ratio=1.5 2 3) background-image: url(path) + for i in 0..length(min_pixel_ratio) - 1 + s = 'all and (-webkit-min-device-pixel-ratio:' + min_pixel_ratio[i] + '),' + s = s + '(min--moz-device-pixel-ratio:' + min_pixel_ratio[i] + '),' + s = s + '(-o-min-device-pixel-ratio:' + min_pixel_ratio[i] + '/1),' + s = s + '(min-device-pixel-ratio:' + min_pixel_ratio[i] + '),' + s = s + '(min-resolution:' + unit(min_pixel_ratio[i]*92, dpi) + '),' + s = s + '(min-resolution:' + unit(min_pixel_ratio[i], dppx) + ')' - s = 'all and (-webkit-min-device-pixel-ratio:' + min_pixel_ratio + '),' - s = s + '(min--moz-device-pixel-ratio:' + min_pixel_ratio + '),' - s = s + '(-o-min-device-pixel-ratio:' + min_pixel_ratio + '/1),' - s = s + '(min-device-pixel-ratio:' + min_pixel_ratio + '),' - s = s + '(min-resolution:' + unit(min_pixel_ratio*92, dpi) + '),' - s = s + '(min-resolution:' + unit(min_pixel_ratio, dppx) + ')' - - @media s - ext = extname(path) - path = pathjoin(dirname(path), basename(path, ext) + '@2x' + ext) - background-image: url(path) - if w in (cover contain) and h == auto - h = null - background-size: w h + @media s + ext = extname(path) + path = pathjoin(dirname(path), basename(path, ext) + '@'+min_pixel_ratio[i]+'x' + ext) + background-image: url(path) + if w in (cover contain) and h == auto + h = null + background-size: w h From 46c56104bf2348afc01411d96aebf7167285746f Mon Sep 17 00:00:00 2001 From: Nicola Guo Date: Mon, 8 Jun 2015 00:06:06 -0400 Subject: [PATCH 2/2] keep array cleaner --- lib/nib/image.styl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/nib/image.styl b/lib/nib/image.styl index 50813891..dfcf0ee3 100644 --- a/lib/nib/image.styl +++ b/lib/nib/image.styl @@ -13,7 +13,7 @@ image(path, w = auto, h = auto, min_pixel_ratio=1.5 2 3) background-image: url(path) - for i in 0..length(min_pixel_ratio) - 1 + for i in 0...length(min_pixel_ratio) s = 'all and (-webkit-min-device-pixel-ratio:' + min_pixel_ratio[i] + '),' s = s + '(min--moz-device-pixel-ratio:' + min_pixel_ratio[i] + '),' s = s + '(-o-min-device-pixel-ratio:' + min_pixel_ratio[i] + '/1),'