undefinedn with LESS

[timjackleus]

I'm trying to use Lost together with less css and gulp but bump into the following error. I'm compiling less before lost, any ideas?

This results in the following output:

[mi2oon]

@timjackleus It looks like your LESS is preforming math operations on your column fraction. This can be avoided if you just escape the fraction definition. An easy way to do this probably by creating a mixin if you wanna avoid escaping over and over again.

[timjackleus]

@mi2oon Thank you for the advice. You mean like how Less needs to escape calc e.g. (calc(~"100% - 250px - 1.5em"); } )? Wouldn't that mean I have to edit the lost core?

[mi2oon]

@timjackleus Exactly like calc.. but you don't need to do anything in the lost core. As basically we want to stop LESS from interpreting the fraction. After LESS has done it's thing, it can run lost and let it do its.

So, you could probably just do lost-column: ~"1/3"; but I am guessing you don't wanna do that everytime you wanna define column. That's why I thought you could create a mixin like the one below. Not sure if that how it's done in LESS but I am guessing that's the concept and you can use it like following .lost-column(1/3);

// lost mixin
.lost-column(@arg) {
  lost-column: ~"@arg";
}

Hope that clarify it a bit and hope it helps 😄

[peterramsing]

@timjackleus Is this issue resolved? 😃

[corysimmons]

@mi2oon Can you confirm your solution works? Particularly with various arguments being passed to lost-column?

If Lost doesn't work with LESS by default, we should probably investigate why and open an Issue with LESS.

[peterramsing]

I'll do some testing with LESS this weekend and see if I can get similar results.

[timjackleus]

Sorry about the late reply, I did try to escape calc as suggested (~" ") but I could not get it to work.

[peterramsing]

Alright. This will be looked into. I'm currently working on #219 but will look into this soon. It looks like it may be a LESS issue, though. Not sure just yet.