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

Maybe resolved itself, after resetting emulator and couple restarts - will let you know
@MillerMark A few weeks ago you tweeted that something huge/incredible was coming....what is/was it? (I am hoping s……
Oddly, it won't hit breakpoints in XF .net standard 2 project now either
@JamesMontemagno Updated to 15.7 preview 2 Visual Studio - now having lots of odd thread issues when starting debug……