Less is a CSS preprocessor which makes CSS dynamic. Twitter Bootstrap on the other hand, is a toolkit to develop web apps and sites fast. In this document we have discussed about using Twitter Bootstrap with Less CSS. This way you can use Bootstrap’s Less variables, mixins, and nesting in CSS.
Obtain Twitter Bootstrap and Less CSS
You may obtain Twitter Boot Strap form GitHUB and Less CSS from lesscss.org.
What is included
Once you downloaded the Twitter Bootstrap, unzip the file and all the files will be extracted to the desired folder. Less components of Bootstrap are placed under 'lib' directory. As of version Bootstrap v1.4.0, there are nine less files. We will see what these files contain.
This is the main less file. This file imports several other less files. The file does not have any code though.
This less file contains style for form layout, input types.
This file keeps CSS code which is reusable.
This Less file contains CSS code for repeatable user interface elements which may not be covered in base style placed under scaffolding Less file.
This Less file contains CSS resets. This is an update of the Eric Meyer's CSS reset. Resets of some of the HTML elements like dfn, samp etc are exempted.
This file keeps the base style required for creating Grid System, Structural Layout, Page Templates.
This Less file contains styles for creating Tables.
Look for typography related styles under this file. Styles for Headings, paragraphs, lists, code etc. are placed here.
This Less file contains variables to customize look and feel of Bootstrap.
How to use
Include following in your HTML page to use it :
Note that, less-1.1.5.min.js is not present within js folder out of the box. You have download and place it under js folder explicitly.
How to compile
Simple include the less js file (as shown under How to use section) and reload your page. js file compiles the less.
From command line
If you have Less Command Line installed, run the following command to compile :
$ lessc ./lib/bootstrap.less > bootstrap.css
You may use --compress command if you want a compressed compilation.
Node with makefile
First install the Less command line by running the following command :
$ npm install lessc
Then run "make" from the root of your bootstrap directory.
You may use "make watch" command if you have "watch" installed. If done so, every time you edit a file under lib folder, bootstrap is automatically rebuilt.
Less Mac app
Though unofficial, there is a less mac application available for compiling