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
–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.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">
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 (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
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.
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:
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.