Server-side compiling
You have taken the first few steps towards Less development already. As explained earlier, client-side compiling has been used. However, client-side compiling with less.js shouldn't be used on real websites. This is because despite making your development easy and fast, compiling your Less files for every page request (or in fact, initial page load per user) will actually slow down your website.
For the production environment, it is required that you compile your files and serve the final CSS file to the browser. The term server side can be somewhat misleading. Server side in this context means a compiled CSS code is sent to the client's browser instead of Less code, which has to be compiled in the client's browser by less.js before it is shown. You should precompile your Less code. By copying and pasting the results of less.js to a file and including this as a CSS file in your HTML files, you should have the same effect, except that your CSS is not minimized.
Less bundles a command-line compiler. Installing and using it is simple using the following command:
>> npm install -g less >> lessc styles.less styles.css
The package manager for the Node JavaScript platform is npm. Node enables you to run Java scripts without a browser. Node and npm run on Windows, Mac OS X, and other Unix/*nix machines. You will find the Node.js source code or a prebuilt installer for your platform by visiting http://nodejs.org/download/. To install npm, please read the instructions in the README file by visiting https://www.npmjs.org/doc/README.html.
Use the –help function to get a list of options you can use with the following command-line compiler:
>> lessc –help
lessc styles.less styles.css compiles styles.less to styles.css. The links to styles.css in your HTML after successfully compiling it are then shown as follows:
<link rel="stylesheet/css" type="text/css" href="styles.css">
Compressing and minimizing your CSS
After compilation, the CSS code is clean and readable. When taking this code into production, you have to compress and minimize it in order to increase the loading speed and save on the bandwidth as well. The basic steps for compressing and minimizing the CSS code are removing comments, white spaces, and other unnecessary code. The results won't be easy to be read by a human, but this doesn't matter because you can use the Less files to update or modify the CSS.
The Less command-line compiler has two options for compressing and minimizing. The first option (-x or –yui-compress) uses the YUI CSS Compressor (which you can access at http://yui.github.io/yuicompressor/css.html) and the second option (--clean-css) uses
clean-css (which you can access at https://github.com/GoalSmashers/clean-css). You cannot use both options together. Clean-css claims to be faster, and until recently, you would not have found much difference in the compression. By compiling keyframes.less from the previous example, including normalize.less and boxsizing.less, the result will have a size of 4377 bytes. With clean-css, this drops to 3516 bytes, whilst YUI gives 3538 bytes. Since Version 1.5.0 of Less, clean-css is the compiler's default option.
Graphical user interfaces
Some of you will prefer a Graphical User Interface (GUI) instead of command-line compiling. There are many GUIs available for different platforms in order to edit and compile your Less code. All of them cannot be mentioned here. Instead, the following is a list of the most positive noticeable ones:
WinLess is a Windows GUI for less.js.
SimpLESS is a cross-platform editor and compiler with many functions, including the automatic addintion of vendor-specific rules to your code.
CodeKIT is a GUI for Mac (OS X). It compiles many languages including Less. It includes optimizations and browser previews.
The last one mentioned is Crunch! Crunch! is also a cross-platform compiler and editor.
When choosing a GUI for Less development, always check which version of less.js it uses. Some GUI's are built on older versions of less.js and don't support the latest features.
Web developers using Visual Studio should check out Web Essentials. Web Essentials extends Visual Studio with a lot of new features, including Less. Also, other IDEs such as PHPStorm have built-in Less compilers. There is a Less plugin for Eclipse also.
