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.

[corysimmons]

Can we close this? LESS has been talking about this since 2-1014. Our Gotchas section covers about all we can do to fix it (make it look as ugly as the rest of LESS 💃).

All future LESS issues 👉 http://stylus-lang.com

[peterramsing]

I think whatever pre-processor works best for each person is the best solution and they all have their own merits. I'd prefer to not recommend any one as this is a PostCSS plugin which should be pre-processor agnostic. 😄

@timjackleus To solve your issue use this:

footer {
  lost-utility: clearfix;
}

.inner-footer {
  margin-top: 10px;
  lost-column: ~"1/3";
  background-color: SteelBlue;
}

Note the lost-column: ~"1/3";

[seven-phases-max]

LESS has been talking about this since 2-1014.

Re-read less/less.js#2769.
They are talking improvements for getting some more syntactic-sugar/less-verbosity in.
For the issue you reported the solution is there since 2013-05.

[peterramsing]

As I commented in less/less.js#2769, this does appear to be normal, in fact a feature (and rather cool one at that) in Less.