{{_i}}Why LESS?{{/i}}

{{_i}}Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}

{{_i}}What's included?{{/i}}

{{_i}}As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.{{/i}}

{{_i}}Learn more{{/i}}

{{_i}}Visit the official website at http://lesscss.org to learn more.{{/i}}

{{_i}}Variables{{/i}}

{{_i}}Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though—assign colors or pixel values as variables and change them once.{{/i}}

{{_i}}Mixins{{/i}}

{{_i}}Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.{{/i}}

{{_i}}Operations{{/i}}

{{_i}}Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiply, divide, add, and subtract your way to CSS sanity.{{/i}}

{{_i}}Note: If you're submitting a pull request to GitHub with modified CSS, you must recompile the CSS via any of these methods.{{/i}}

{{_i}}Tools for compiling{{/i}}

{{_i}}Node with makefile{{/i}}

{{_i}}Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:{{/i}}

$ npm install -g less jshint recess uglify-js

{{_i}}Once installed just run make from the root of your bootstrap directory and you're all set.{{/i}}

{{_i}}Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}}

{{_i}}Command line{{/i}}

{{_i}}Install the LESS command line tool via Node and run the following command:{{/i}}

$ lessc ./less/bootstrap.less > bootstrap.css

{{_i}}Be sure to include --compress in that command if you're trying to save some bytes!{{/i}}

{{_i}}Javascript{{/i}}

{{_i}}Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.{{/i}}

<link rel="stylesheet/less" href="/path/to/bootstrap.less">
<script src="/path/to/less.js"></script>

{{_i}}To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.{{/i}}

{{_i}}Unofficial Mac app{{/i}}

{{_i}}The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.{{/i}}

{{_i}}If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.{{/i}}

{{_i}}Extending Bootstrap{{/i}}

{{_i}}Built with LESS{{/i}}

{{_i}}Why LESS?{{/i}}

{{_i}}What's included?{{/i}}

{{_i}}Learn more{{/i}}

{{_i}}Variables{{/i}}

{{_i}}Mixins{{/i}}

{{_i}}Operations{{/i}}

{{_i}}Compiling Bootstrap with LESS{{/i}}

{{_i}}Tools for compiling{{/i}}

{{_i}}Node with makefile{{/i}}

{{_i}}Command line{{/i}}

{{_i}}Javascript{{/i}}

{{_i}}Unofficial Mac app{{/i}}

{{_i}}More Mac apps{{/i}}

Crunch

CodeKit

Simpless