nib
nib copied to clipboard
image() mixin breaks full URL:s
Image() mixin breaks full image url:s with nib 1.0.2
For example:
.logo
image: url(http://cdn.service.com/logo.png) 200px 200px
Output:
.logo {
background-image: url("https://cdn.service.com/logo.png");
width: 200px;
height: 200px;
}
@media all and (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5/1),(min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) {
background-image: url("https:/cdn.service.com/logo.png");
-webkit-background-size: 200px 200px;
-moz-background-size: 200px 200px;
background-size: 200px 200px;
}
Second slash is missing after http: in the high resolution image url.
This is a easy fix :+1: @tj
image(path, w = auto, h = auto, min_pixel_ratio = 1.5)
background-image: url(path)
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 = dirname(path) + '/' + basename(path, ext) + '@2x' + ext
//p('final: ' + path) // uncomment this line to view url result
background-image: url(path)
if w in (cover contain) and h == auto
h = null
background-size: w h
@oOthkOo - wanna make a PR?
@slang800 How I can do that ? I am a solid beginner on Github ;-)