Bootstrap with LESS (Part 1)


Customize and extend Bootstrap with LESS, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS

- June 5, 2015

Rest of the Story:

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>  

Reference: https://getbootstrap.com/2.0.1/less.html