Bootstrap with LESS (Part 1)

The latest version of Bootstrap uses LESS (a CSS preprocessor) to build the distributed css files.  Confused yet? So, lets focus on what is LESS and how can you compile css.  The best source of less documentation can be found here

“Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.  Less runs inside Node, in the browser and inside Rhino. There are also many 3rd party tools that allow you to compile your files and watch for changes. 

For example:

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
   -webkit-box-shadow: @style @c;
   box-shadow: @style @c;
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
   .box-shadow(@style, rgba(0, 0, 0, @alpha));
.box {
   color: saturate(@base, 5%);
   border-color: lighten(@base, 30%);
   div {
.box-shadow(0 0 5px, 30%) }

will compile to…

.box {
   color: #fe33ac; border-color: #fdcdea;
.box div {
   -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);

Essentially, LESS code will get compiled into CSS.  In order to compile there are command line applications.  Currently, I am using Node.js with a npm package installed via npm install –g less

Technically, you can also compile ‘client-side’ but in production it is recommended that the css is precompiled (remember compiling just means translating the less css code to simple css files).  Include your styles.less via the following link as well s the less.js file to perform compilation.

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>




comments powered by Disqus


Recent Tweets

19 Types of Developers Explained…
Can't Afford Photoshop? Here Is The Best Free Drawing Software | Digital Trends…
Retweeted by @dyardy Fun day christening Amazon’s latest wind farm. #RenewableEnergy
Retweeted by @dyardy Hey C# peeps, we’re trying C# in browser with reference content. Try it here:… reply with feedback /cc @LadyNaggaga
23 Amazing Vintage Photographs Taken Inside WWII Tank Factories ~ vintage everyday…