Compiling your first LESS file

The easiest way to compile LESS files is to install Node.js and use its package manager NPM to install RECESS. There are Node.js installers available for both OS X and Windows. In case you are running Linux, visit https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager for instructions on how to install Node.js via package managers.

Once you have Node.js up and running, you can run the npm command to install RECESS, which is a CSS hinter written by Jacob Thornton himself. It is the only compiler officially supported by Bootstrap, and it can compile LESS into CSS among other things. You can install RECESS by running the following command:

npm install -g recess

This will install RECESS globally on your system. Now that you have RECESS installed, its time to create your first LESS file. Create a new folder named less in the project root and then create a file named styles.less in it. Add the following code to your newly created file:

@font-family: Arial;
@text-color: red;
body {
  font-family: @font-family;
  color: @text-color;
}

To compile the file, navigate to your project root and run the following command:

recess styles.less --compile > styles.css

Note

The latest version of Bootstrap, v3.1.x, will not compile using RECESS anymore since they moved to use grunt-contrib-less for compilation.

This will compile the code in your styles.less file and place the result in a file named styles.css. If you look into the file created by the compiler, you should see the following:

body {
  font-family: Arial;
  color: #ff0000;
}

Tip

You can also compress the style by running RECESS with the --compress option in the following way:

recess styles.less --compress > styles.css

This will produce the following output:

body{font-family:Arial;color:#f00}

To learn more about what RECESS can do for you, visit the project website at https://github.com/twitter/recess.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.39.144