Doing More with LESS.js

If you’re a beginner front-end developer and haven’t heard of LESS then sit back, relax, get a nice cool drink and let me make your life a little better. Are you sitting? You’re a front-end developer, of course you are. Let’s begin.

I’ve written CSS for the worst browsers ever. IE 5.5, IE6, IE… you get the picture. I can Ctl+S, Alt+Tab and F5 in my sleep while writing semi-cross-browser compatible code from the first line. When I’d first heard of LESS’ variables, mixins, and nested syntax I thought it sounded interesting and figured if it would save a few keystrokes I’d give it a shot. Best decision ever. Here’s why.

LESS code is basically regular CSS with some additional umph. With variables, you set your brand colors once and use them throughout the stylesheet. Need to change a color? Update the variable and you’re done. It gets better. Use mixins, similar to functions, to add blocks of code. If you have a few font styles, setup mixins for them and then, instead of writing “font-family…” call the mixin where needed. Here’s an example:

// Fonts
.sans() {
	font-family: 'Droid Sans', sans-serif;
}
.serif() {
	font-family: 'Droid Serif', serif;
}

Now just call the mixin to add those lines to an existing style:

body {
  .serif();
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

Nice, right? If you had 5 buttons all with a similar look you could write a button mixin and pass in a background color:

.btn(@background: #f5f5f5, @color: #ffffff, @border-color: #000000) {
	.sans();
	color: @color;
	background: @background;
	border: 1px solid @border-color;
}

btn.red {
  .btn(red);
}

Or even make a mixin to write all that pesky background gradient code for you:

.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
  background: @color;
  background: -webkit-gradient(linear,
                               left bottom,
                               left top,
                               color-stop(0, @start),
                               color-stop(1, @stop));
  background: -ms-linear-gradient(bottom,
                                  @start,
                                  @stop);
  background: -moz-linear-gradient(center bottom,
                                   @start 0%,
                                   @stop 100%);
  background: -o-linear-gradient(@stop,
                                 @start);
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
}

All that is cool right? The best feature of all is that you can use LESS.js to render it all in the browsers, constantly refreshing the stylesheet. With this in place, just save the less stylesheet and your browser will reload the stylesheet, not the page, with the updates. In the header:

If you want to leave your site running less without the overhead of constant updates, change the header code to the following:

We’ve done this with our Explainer Video landing page.

If you want to compress it into stylesheet and remove LESS, use a free little air app called Crunch.

Sold yet? Check out my GitHub repo titled “Base-Start” to play with it. You’ll need to put it on a server to get it all to play nicely (online or local: WAMP, MAMP, etc)

Let me know what you think and if it helps. Happy LESS-CSS-IINGSSGSS!