diff --git a/lib/nib/image.styl b/lib/nib/image.styl index 48672466..dfcf0ee3 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) + 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