Variable in url(..) not possible #190

Closed
tristanlins opened this Issue Feb 2, 2011 · 8 comments

Comments

Projects
None yet
9 participants
@tristanlins

I tried to make a function, that using an argument as url(..) value.

e.a.

.give-a-background(@bg) {
    background: url(@bg) no-repeat left center, ...;
}

.css-class {
    .give-a-background("images/foo.png");
}

i got a "could not call charAt of undefined" from line 2183 (v 1.0.41), because val.value is undefined.

currently its only possible this way

.give-a-background(@bg) {
    background: @bg no-repeat left center, ...;
}

.css-class {
    .give-a-background(url("images/foo.png"));
}
@funkatron

This comment has been minimized.

Show comment
Hide comment
@funkatron

funkatron Feb 26, 2011

Running into this myself. Would be extremely handy for setting base paths.

Running into this myself. Would be extremely handy for setting base paths.

@jiggliemon

This comment has been minimized.

Show comment
Hide comment
@jiggliemon

jiggliemon Apr 16, 2011

Try This:

@base: "//";
.background(@image:'', @left:0, @top:0,@repeat:no-repeat){
    @url: %('%s%s',@base, @image);
    background: url(@url) @left @top @repeat;
}

Try This:

@base: "//";
.background(@image:'', @left:0, @top:0,@repeat:no-repeat){
    @url: %('%s%s',@base, @image);
    background: url(@url) @left @top @repeat;
}
@cloudhead

This comment has been minimized.

Show comment
Hide comment
@cloudhead

cloudhead Apr 16, 2011

Member

That's odd, it works just fine here.

Member

cloudhead commented Apr 16, 2011

That's odd, it works just fine here.

@jiggliemon

This comment has been minimized.

Show comment
Hide comment
@jiggliemon

jiggliemon Apr 17, 2011

@cloudhead I was pointing out to funkatron & trilin how I got it to work.

@cloudhead I was pointing out to funkatron & trilin how I got it to work.

@neonstalwart

This comment has been minimized.

Show comment
Hide comment
@neonstalwart

neonstalwart Aug 8, 2011

Contributor

for anyone else who comes across this issue i found i couldn't get @jiggliemon's solution to work (less 1.1.4) but based on http://lesscss.org/#-string-interpolation this worked for me

.background-image (@url) {
    background-image: url("@{url}");
}

i suppose this ticket could be closed?

Contributor

neonstalwart commented Aug 8, 2011

for anyone else who comes across this issue i found i couldn't get @jiggliemon's solution to work (less 1.1.4) but based on http://lesscss.org/#-string-interpolation this worked for me

.background-image (@url) {
    background-image: url("@{url}");
}

i suppose this ticket could be closed?

@csnover

This comment has been minimized.

Show comment
Hide comment
@csnover

csnover Jan 10, 2012

Contributor

This only happens in browser environments and is caused by the relative path “fixing” code in the tree.URL ctor. It does not check that val.value actually exists before trying to operate on it.

Contributor

csnover commented Jan 10, 2012

This only happens in browser environments and is caused by the relative path “fixing” code in the tree.URL ctor. It does not check that val.value actually exists before trying to operate on it.

@jsdalton

This comment has been minimized.

Show comment
Hide comment
@jsdalton

jsdalton Feb 17, 2012

This is an issue when trying to use Twitter Bootstrap 2.0 with less.js in the browser environment.

Bootstrap uses the url(@url) format to pull sprite images in in sprites.less. less.js chokes on the undefined val.value that's passed to tree.URL() and an error is thrown, causing bootstrap not to load.

@csnover 's change resolves the issue for me.

I have updated my local copy of less.js so it's smooth sailing for me, but since this issue prevents Twitter Bootstrap 2.0 from running in the browser environment I hope it will get resolved soon, since others are probably having the same problem. E.g. I'm guessing this SO question might be related: http://stackoverflow.com/questions/8095499/twitter-bootstrap-wont-work-with-less-js

This is an issue when trying to use Twitter Bootstrap 2.0 with less.js in the browser environment.

Bootstrap uses the url(@url) format to pull sprite images in in sprites.less. less.js chokes on the undefined val.value that's passed to tree.URL() and an error is thrown, causing bootstrap not to load.

@csnover 's change resolves the issue for me.

I have updated my local copy of less.js so it's smooth sailing for me, but since this issue prevents Twitter Bootstrap 2.0 from running in the browser environment I hope it will get resolved soon, since others are probably having the same problem. E.g. I'm guessing this SO question might be related: http://stackoverflow.com/questions/8095499/twitter-bootstrap-wont-work-with-less-js

@Meligy

This comment has been minimized.

Show comment
Hide comment
@Meligy

Meligy May 25, 2012

Is the fix available in current release? (asking as I see the bug is still open).

Meligy commented May 25, 2012

Is the fix available in current release? (asking as I see the bug is still open).

@lukeapage lukeapage closed this in 2c75e4f Aug 18, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment