For server-side compilation, Less comes with a command-line compiler for Node.js. The node package manager (npm) can be used to install the Less command-line compiler.
Note
Node is a platform built on Chrome's JavaScript runtime called V8, allowing you to easily create fast and scalable network applications.
If you have not installed Node.js and npm on your system yet, you will have to do this first. You can do this by following these steps:
Download the
Node.jssource code or a prebuilt installer for your platform from http://nodejs.org/download/.Install
Node.js, which includesnpm, on your system.
In the Installing Node and Grunt recipe in Chapter 11, Compiling Less Real Time for Development Using Grunt, you can read about installing Node.js and npm on your system in more detail. After installing npm, you can simply run the following command:
npm install --global less
For this recipe, you will first need to create a simple Less file and save this file, which for instance might be
example.less. You can try the following code in your example file:@color: red; .paint() { color: @color; } p { .paint(); }After creating the Less file in the preceding format, you will need to save your file (which may be
example.lessor whatever filename you have chosen). If you have chosenexample.less, you can run the following command in your command prompt:lessc example.lessAfter running the
lessccommand, you will see it output the following CSS code in the console:p { color: #ff0000; }
If you are new to Less, the example Less code used inside example.less may contain some syntax that is completely alien to you. The code defines a @color variable and a paint() mixin. The Declaring variables with Less for commonly used values recipe explains the basics of variables in Less, while the Setting the properties of CSS styles with mixins recipe does the same for mixins.
By default, the lessc compiler outputs to stdout. You can redirect the output to a CSS file with the following command:
lessc example.less > example.css
Running the lessc compiler without any parameters will give you a list of options for the compiler.
You can use the -x option to compress your output as follows:
lessc -x example.less > example.css
In a similar manner, you can use either the --clean-css option for a more involved minification, or the --source-map option to create a v3 CSS source map. In the Using CSS source maps to debug your code recipe in Chapter 2, Debugging and Documenting your Less Code, you can read more about CSS source maps and Less. Note that in version 2 of Less, the --clean-css option has been moved into a plugin. The usage is similar: just install the plugin (npm install -g less-plugin-clean-css), then make use of the --clean-css argument.
There are many other third-party compilers for Less with a compressive list available at http://lesscss.org/usage.
With grunt-contrib-less, you can compile your code with Grunt. For Gulp, you can use gulp-less. The Compiling style guides with Grunt recipe in Chapter 11, Compiling Less Real Time for Development Using Grunt, shows you how to build a development workflow with the Grunt task runner.
In this recipe, you read about Grunt and Gulp, which are JavaScript task runners or build systems. Comparing with Grunt's build system, Gulp's build system is relatively new. Gulp uses streams and code over configuration, which makes it more simple and intuitive.
In Chapter 11, Compiling Less Real Time for Development Using Grunt, you can read all you want to know about Grunt
To read more about Gulp, you can visit http://gulpjs.com/
The Gulp Less plugin can be found at https://github.com/plus3network/gulp-less