Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

3L working with LessPHP? #13

Open
katerlouis opened this issue Jul 3, 2014 · 12 comments
Open

3L working with LessPHP? #13

katerlouis opened this issue Jul 3, 2014 · 12 comments

Comments

@katerlouis
Copy link

Sorry to bother with a seemingly nobrainer- for me it isn't! And the internet is a great place with lots of helpful people, right? :)

I really don't like the client-side preprocessing and end up using lessPHP (http://leafo.net/lessphp/) since I love less so much!

But it seems lessPHP isn't up to date, is it?

So is 3L working with LessPHP?

Thx!

@interactivellama
Copy link

What versions of Less does LessPHP support?

@mateuszkocz
Copy link
Owner

Using PHP to compile LESS files is a rather bad idea, since the compilers are written in - well - PHP and can just try to be compatible with the less.js.

Answering your question: no, the LessPHP doesn't work with the 3L (it can't, for example, handle multiple arguments in the .box-shadow mixin). Another presumably popular LESS' PHP compiler - Less.php - fails to evaluate JavaScript used in 3L.

If you're going to compile any non trivial less file on the server, you'd be better using a real JavaScript compiler in the Node environment.

I'm not sure why are you so into using a server for compilation? The client-side compilation, using less.js in the browser is certainly a bad idea, but why won't you use the Node with the Less compiler package installed to create a CSS, or at least any desktop tool that internally uses the less.js?

@katerlouis
Copy link
Author

Thx for the quick answer!
Up to here I thought less-compiliation through less.js is only possible inside the browser so the less file needs to be compiled every single site-call. To be honest I don't understand a word ur saying "about a Node with the less compiler package".
Great thing with lessPHP is only changed files get compiled again and saved new on the server. No changes, no compiling.
But it seems I totally misunderstand the usual less.js-way. I'd really appreciate if you would explain it to me :)

louis.

@mateuszkocz
Copy link
Owner

The .less files are just for development. Whenever you want to deploy your application or website on a server, it's better to deliver only the compiled .css, leaving all .less on your machine. To do as such you have basically two options:

  1. install the Node environment and use the original less.js (consult the quick instruction on the LESS website,
  2. use an external tool to do the compilation for you (I used to use Prepros before converting to the option 1).

I think that for now, the second option will suit you more.

Most of the tools can watch your .less files and compile them instantly after they change delivering the .css in the fly. The compilation is a quick process. It usually takes less than a second, so you don't need to be concerned about making a burden on your machine and feel free to recompile it every single line change. Also remember to refer only the compiled .css in your HTML file.

@interactivellama
Copy link

https://incident57.com/codekit/ is another nice one if you are 1) On a mac 2) Don't like the command line.

@katerlouis
Copy link
Author

Uh- my current developing workflow looks as following:
I use Transmit to make network volumes from my development subdomain (dev.myproject.com) where is the latest version of the project. Now I can work on the files with TextMate 2 directly on the server, without the annoying upload every single time. Of course I could work locally with AMPPS or such (which I do for some stuff) but mostly people wanna check the current results and kind of live-advice me regarding margins, colors and stuff. I just see more advantages in working on the server right away.

@mateuszkocz
Copy link
Owner

I might be wrong, but doesn't Transmit basically just upload the files for you in the background on every change? If so, you are still free to use any tool that compile the CSS live. Transit will be just uploading this file. Of course, this will generate a bit of overhead, since you will be uploading the whole CSS instead of a single LESS files (given you have them divided that way), but I don't think this will be noticeable in any way.

Otherwise, I believe there's no PHP compiler that could handle the mixins in 3L or any other library that uses the JavaScript-only features of less.js.

@katerlouis
Copy link
Author

Hard decision. Leaving known waters and work for the change or stick to the roots? Over time I coded my own lil mixin library not even thinking about that there could be a real big one out there, till today- and up to here it serves me pretty good, buuut leaving this job to someone else would be great.-

But back to topic. So you mean before saving TextMate or so should compile it into a css for me? That sounds like a bummer with 1sec compile-time in mind. I save ooooften. And refresh even moooore often. CodeKit looked especially here very interesting. Is CodeKit a standalone text-editor? If so I'm pretty sure it will lose against the awesome TextMate 2.

Aiaiai.

@mateuszkocz
Copy link
Owner

No, CodeKit is an app that "just" compiles the files into their final state (ie. .less -> .css). You still need to use a text editor.

The workflow with this kind of software is:

  1. You edit your .less file and save changes.
  2. The app (eg. CodeKit) sees the change and creates the output .css file.
  3. The .css file is then seen by the Transit and uploaded to the server.
  4. You refresh the browser.

I don't think this will take much longer than using some kind of a server compilation. If this will not suit you though, you are still free (and it's completely fine) to use the client-side compilation of the less file while in development. Just switch to the outcome .css file when in production.

@katerlouis
Copy link
Author

Yeah but I'd like to use 3L ;) - And therefore the server side compilation stand's in way.
But you made a very good point.. if I wait for the compile while refreshing or while saving.. doens't make that much of a difference. Ok, I don't refresh each and every save.. but, still..

I just wanna be sure: so CodeKit compiles my less to a css and saves it on a server? So I don't need my Transmit-Network-Volume workflow? Do I have the files simultaneously saved on my local drive and then uploaded by CodeKit? That would be great because I'm a very lazy backupper.

What interests me most is the opportunity to see live updates on another screen of my css without refreshing. Although it's hard to imagine how can smoothly work. I know the developer tools of Safari, Chrome and such but still compared to my speed in TextMate 2 it's a real pain in the ass to test around in the developer tools.

@katerlouis
Copy link
Author

But- to not lose the point here.
I'm curious how CodeKit helps me to use 3L. I see it compiles for me and stuff. But how 3L comes into place here is still a mystery for me. But I still haven't taken a closer look at CodeKit yet. Just so you don't think I'm all stupid!

:D

@mateuszkocz
Copy link
Owner

I just wanna be sure: so CodeKit compiles my less to a css and saves it on a server?
So I don't need my Transmit-Network-Volume workflow?

I'm not using Transmit and Network Volume (I'm not even a Mac user), so I might be wrong on that. The CodeKit tracks your files in the Network Volume folder (I guess the NV works that way - creating a local folder) and when it sees a change, it compiles a .css file into that folder. Since the changes are detected by Transmit (again, just a guess), the .css is uploaded.

I'm curious how CodeKit helps me to use 3L. I see it compiles for me and stuff. But how 3L comes into place here is still a mystery for me.

Not really sure of the problem here. You have to @include '3L.less into your working file and then you can use all the 3L's mixins. Compilation is just to transform all .less (together with the included 3L) into a single .css usable by the browser.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants