Writing LESS, doing more

Lately I’ve been doing a lot of dabbling in different technologies. Some of them, like responsive web design, I should have got myself involved in a long time ago. Others are more for interest to keep up with the industry. Y’know… as you do.

LESS is one of those technologies. Laravel uses it. Bootstrap uses it. I’d done a bit with SCSS previously, but it seemed like LESS has more advantages… maybe. Because of my experience with SCSS I already knew about the powerful benefits of nested CSS and variables, but mixins are something I never really looked at until now. They’re really quite clever…

@my-colour: #CC0000;

p {
  a {
    color: @my-colour;
  }

  a:hover {
    color: lighten(@my-colour, 10%);
  }
}

Give yourself a base colour for something, and lighten the colour quickly without having to calculate the relative hex code. Genius. Maths calculations make the whole thing so much more programmer-like, and all of a sudden CSS has been given an overhaul. Yes I know it compiles into CSS, but I really love the way LESS gives programmers a better way to structure their styling code. As was once said in The Matrix Reloaded, “it’s like wiping your arse with silk. I love it.”

It only gets better when you add responsive into the mix. There are many ways to do the whole responsive thing, and most grid systems will have you adding classes all over the place – “grid-2” and “grid-6” inside “grid-row” divs.

But wait a minute… on my travels I found something really intriguing, and I’ve been messing around with it quite a bit. The Semantic Grid System¬†gets rid of all that rubbish – instead of adding grid classes all over the place you define your columns as mixins in your styling code. Truly beautiful, semantic and makes for much easier reading when looking at your HTML code. In a 12 grid layout:

<div class="left-navigation">
  ...
</div>

<div class="main">
  ...
</div>

<div class="right-advertising">
  ...
</div>
.left-navigation {
  .columns(3);
  ...
}

.main {
  .columns(7);
  ...
}

.right-advertising {
  .columns(2);
  ...
}

To me, that is a much, much better way of dealing with grids. And then you can easily make that work when adding responsive media queries by setting .columns(); to 12, for example.

LESS definitely lets me do more. Hooked.

Leave a Reply

Your email address will not be published. Required fields are marked *