Less CSS on Windows

LESS CSS on Windows

I think I found the problem. In my first installation I installed to C:\Program Files\Ruby
so I uninstalled and tried the default 'C:\Ruby' install path. Seems to fix the problem and it now works correctly. Thanks.

How to install and run lessc on top of node.js and Windows?

In a console, run the following:

node C:\Users\Me\AppData\Roaming\npm\node_modules\less\bin\lessc style.less > style.css

style.less must be in the console's directory.

LESS Client for Windows

Have you tried using it client-side? All the compiling happens with javascript so you don't need a plugin or client at all. Using LESS client-side is great for local development or production if you're ok with depending on javascript.

If you're not comfortable with depending on javascript in a production environment you could:

  • set up a node.js server to handle the compiling
  • compile into CSS via the command line or similar only before pushing to production

Both these options allow you to develop locally without the need for any extra software.

Netbeans Less CSS (Node.js preprocessor) not recognizing Mixin

The reason as to "why" this problem was happening came from @seven-phases-max 's upvoted comment. Quoting from him:

This is because you set Netbeans to compile each less file on save. So when you hit save it tries to compile just doc-that-calls-mixin-function.less and the error is expected since no mixins/animation.less is imported there

@seven-phases-max suggest the following:

You need to configure it [Netbeans] to recompile only styles.less

Alright, I looked for sites that could help me configure Netbeans to only recompile main file when I change any other Less file. I found nothing, only bugs and people wanting exactly the same. So there are two solutions to this:

Solution 1 (not the one I applied)

First solution is obvious (no I don't mean give up on Netbeans); just add @import file_of_mixin_you_need on the Less file where you call the mixin. In my case:

doc-that-calls-mixin-function.less

@import 'mixins.less';

.rounded {
.RoundBorders(4px);
}

If it were a small project with few files, I'd get over it and just do it this way. Should you do it this way for a big project, or medium sized one? My answer is "heck no". Why? Well, it's @import boilerplate all over the place. How are you going to keep track of that?

Solution 2 (the one I am currently using)

This solution can only be carried out if you have Node.js installed in your system. Installing for Windows is a breeze, just go to Node.js site, and download the windows installer. Once downloaded in your console you will have access to "npm" command, use it to install lessc: npm install -g less . Now you are ready.

Well, in Netbeans I completely removed the "compile on save" deal. I opened my command windows and navigated to my Netbeans project's path, all the way to where my less files are. I leave that command window open and carry along. The moment I have finished saving and doing whatever I need in Netbeans IDE, here are the steps to follow:

  1. Delete file ../css/style.css (Otherwise it won´t get overwritten on less compile)
  2. Go to your command window (remember that you must be in your less folder) and carry out this command:

    lessc style.less > ...\css\style.css

  3. Done

If you have any errors, the command window will show them. I chose this solution cause it avoids the @import boilerplate on all my files. Also, I now longer have to worry about .gitignore"ing" the files that Netbeans was compiling (for every less file I had, it generated a css file).

That's it. Hope it helps anyone else.

Compile multiple LESS files using the Windows Command Prompt

As seven-phases-max stated, less is a command line script in windows and does not return back to the original script.

The work-around is to use call. The script ended up being:

echo Compiling CSS...   
pause
call lessc -x C:\path_to_file\file1.less ..\output\file1.css
pause
call lessc -x C:\path_to_file\file2.less ..\output\file2.css
pause

All credit goes to seven-phases-max, i just wanted to clarify the correct method as it may help others in the future.



Related Topics



Leave a reply



Submit