Battle of the LESS Mixin Libraries: LESS Elements vs. LESS Hat vs. Bootstrap

by on 8th October 2012 with 6 Comments

screenshot

LESS is a friendly, easily-approachable CSS preprocessor. Though ultimately, Sass and Stylus are more powerful and robust, LESS has a certain charm that keeps it as a forerunner in the battle of the preprocessors.

If you’re a Sass fan, then you can take advantage of Compass, an incredible framework that makes coding with complex CSS3 properties a breeze. But what about LESS users? Where’s their Compass? Today we’ll look at three awesome mixin libraries that will help fill that void.

What’s the Deal with LESS?

If you’re one of the CSS coders that’s still on the outside, looking in at CSS preprocessors but not knowing if you’re skilled enough to actually use one, LESS is a great place to start.

The first thing to keep in mind is that preprocessors actually make coding easier, even if they seem like a major complication at first. To begin, hit up the LESS website and download less.js.

screenshot

Now create a .less stylesheet (just like a .css stylesheet, only with a different extension) and drop it into your HTML just like any other stylesheet. Also be sure to drop in the JavaScript file.

“The JavaScript file will automatically take care of turning your LESS code into CSS that the browser can read.”

That’s it! That was painless, right? Now go along and write CSS just like you always would in that .less file, and gradually start playing with awesome LESS features like variables and mixins. The JavaScript file will automatically take care of turning your LESS code into CSS that the browser can read.

Now, the thing to remember is that the less.js file is for testing purposes. When you’re ready to actually take this sucker live, drop your .less file into Less.app or some equivalent and it will spit out a plain old CSS file. That vanilla CSS file is what you should be using in your final draft.

Keep your LESS files around though, as you update them, Less.app will update your CSS file as well. It really is a very simple workflow. Give it a shot, it’s a lot easier than you think.

What About Sass?

If you’re a Sass user, congratulations, I am too. However, this post isn’t meant to be a LESS vs. Sass debate so just pat yourself on the back and move along instead of leaving me tons of anti-LESS comments.

LESS Mixins

One of the best features of any CSS preprocessor is the ability to create mixins, which allow you to tie a bunch of properties and customizable values all into one nice little package.

Here’s an example:

/* Mixin */
.box-shadow (@x: 0px, @y: 3px, @blur: 5px, @color: #333) {
  -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @color);
  -moz-box-shadow: @x @y @blur rgba(0, 0, 0, @color);
  box-shadow: @x @y @blur rgba(0, 0, 0, @color);
}

This takes all of the box-shadow code and wraps it up nicely into a single mixin that can be implemented with custom values (or the defaults that we used above). Now, instead of writing a huge chunk of code every time you want a box-shadow, this is all you need:

/* Implementation */
.somediv {
  .box-shadow(5px, 5px, 6px, #eee);
}

Pretty awesome right? When this code is compiled, it’ll spit out as plain old CSS. You get a much more readable and easily updatable code base without sacrificing browser compatibility.

Save Time with Mixin Libraries

As you can imagine, there are a ton of possible mixins that almost every CSS coder could benefit from using. CSS3 is fraught with bloated, redundant, prefix-filled code that is downright a pain to write. A few pre-fab mixins for all of this nonsense could go a long way towards saving you a ton of time and hassle when building websites.

“CSS3 is fraught with bloated, redundant, prefix-filled code that is downright a pain to write.”

Fortunately, there are lots of people in the web development community who have worked on just such a project. As I mentioned in the intro, Compass is the ultimate resource for Sass users, but just because there’s no version of Compass for LESS doesn’t mean that you have to miss out. There are some really great LESS mixin libraries out there just waiting for you to jump on board. Let’s look at a few.

LESS Elements

LESS Elements was one of the first solid LESS mixin libraries that I came across. In truth, it’s pretty basic, but it’s a decent place to start:

screenshot

Included Mixins

LESS Elements comes with fifteen prebuilt mixins (again, very basic). Here’s what’s included:

  • .gradient
  • .bw-gradient
  • .bordered
  • .drop-shadow
  • .rounded
  • .border-radius
  • .opacity
  • .transition-duration
  • .rotation
  • .scale
  • .transition
  • .inner-shadow
  • .box-shadow
  • .columns
  • .translate

As you can see, lots of your standard CSS3 complexities are covered here: gradients, shadows, even transitions.

Syntax

The syntax here is pretty simple, they all pretty much follow the conventions of the normal CSS properties. As with all LESS mixins, they’re implemented via the period syntax, so it looks and feels like you’re nesting a class within a class.

.someclass {
  .rotation(15deg);
}

Critique

LESS Elements was a great project that had a lot of potential, but it never really realized that potential. If, like me, you are in fact used to the amazing combination of Sass and Compass, LESS Elements feels tiny by comparison. There’s just so much that isn’t here that it’s difficult to get excited about what is.

“There’s just so much that isn’t here that it’s difficult to get excited about what is.”

That being said, there are tons of coders out there who prefer simplicity and don’t really need the extra fluff, so this might still appeal to that crowd.

Beyond the fact that LESS Elements is so basic is the unfortunate truth that, as far as I can tell, it hasn’t been touched in a year. Given that CSS is still evolving as new features are implemented and older features finally reach cross-browser status, there’s a lot of danger in basing your workflow on a tool that is itself stagnant.

Ultimately, there was some great work here, but I think we can do better.

LESS Hat

The amazing folks that brought us CSS Hat just released LESS Hat an awesome and modern LESS mixin library. After looking around, they couldn’t find a decent source for LESS mixins, so they made their own!

screenshot

Included Mixins

There are nineteen mixins included with LESS Hat, with keyframes (the twentieth) on the way. As you can see, it covers pretty much everything that we saw in LESS Elements and more:

  • .animation
  • .keyframes (coming soon)
  • .appearance
  • .backface-visibility
  • .background-clip
  • .background-origin
  • .background-size
  • .border-radius
  • .border-image
  • .box-shadow
  • .box-sizing
  • .columns
  • .font-face
  • .gradient
  • .opacity
  • .perspective
  • .size
  • .transform
  • .transition
  • .user-select

In fact, they’re so proud of their feature set that they’re not afraid to compare it to LESS Elements and even Compass.

screenshot

As you can see, LESS Hat is pretty much the bees knees. The strong points that you’re going to love include the ability to implement multiple gradients without concern for older syntax, unlimited box shadows, 3D transforms and even @font-face support.

Syntax

The syntax for LESS Hat is actually a little quirky. You’ll notice this particularly on any properties where you can implement multiple instances of a property, such as with multiple box-shadows.

.someclass {
  .box-shadow(~"2px 2px 4px #000, inset 0 0 3px #eee");
}

As you can see, you’ve got quotes and the ~ symbol to deal with in addition to the typical parenthetical syntax. What’s going on here?

The answer is pretty complicated. It boils down to the fact that LESS itself doesn’t play so nicely with the syntax for including multiple property instances. To deal with this, they take input as an escaped string and then parse it within each mixin. You can read more about this here.

Critique

LESS Hat represents one of the best third party LESS resources I’ve seen to date. A lot of great effort has been put in here and the result is truly something that’s great. If the CSS Hat guys keep up on it, this could become a must-have for LESS users.

The critiques here have largely already been addressed. It would be nice to see keyframe support, but that’s supposed to be coming soon so this won’t be a long term problem. The syntax does cut down on the user-friendly nature of LESS, but it seems to be a necessary evil if you want the kind of feature set that LESS Hat offers.

Twitter Bootstrap and Preboot

Twitter Bootstrap is a wildly popular front end framework born out of the awesome work of Twitter developer Mark Otto. At its very core, Bootstrap is built and maintained on a LESS foundation, not pure CSS.

Given that Bootstrap is such an amazing and unbelievably vast set of tools, this makes it one of the most impressive collections of LESS resources ever built.

screenshot

What About Preboot?

Historically, Mark Otto worked on a project called Preboot.less, which was a collection of LESS mixins. This project has evolved and been rolled into Bootstrap though so look there instead (Mark confirmed for me that Preboot is now a stagnant project).

Bootstrap & LESS

You want LESS files? You got ‘em. Bootstrap currently comes with a whopping forty .less files, which control all of its various aspects and features.

screenshot
“If you’re looking for something that’s truly on par with the depth and breadth of Compass, Bootstrap is your answer.”

If we’re strictly comparing to the two previous libraries that we used before, then we’ll want to take a look at the mixins.less file. Here you’ll find mixins for gradients, opacity, shadows, clear-fix, the grid system and a lot more. If you’re looking for something that’s truly on par with the depth and breadth of Compass, Bootstrap is your answer.

Critique

As you can tell by my previous posts, I’m a huge Bootstrap fan. It’s a really solid resource and a great way for Twitter to contribute to the developer community.

“All of these great mixins are included in Bootstrap, but as far as I can tell, they don’t really appear in the current documentation.”

My main beef here is that all of these great mixins are included in Bootstrap, but as far as I can tell, they don’t really appear in the current documentation. If they do, I sure can’t find them, which is still a major complaint.

Other resources, such as LESS Hat, LESS Elements and Compass, all clearly list out the included mixins with examples of syntax, implementation code and ultimate output. We need something like this for the Bootstrap mixins. Maybe they’re really only meant for the actual Bootstrap UI elements, but where’s the fun in that?

Which is the Best?

I think it’s pretty obvious that LESS Hat and Bootstrap both kick the pants off of LESS Elements, but between the two, which is best? The answer of course, depends on what you need.

Bootstrap is not a list of mixins, it’s a huge framework with a ton of resources. If you’re just looking for a handful of mixins, you could always download Bootstrap and grab the mixins.less file, but even that might be a little heavy for your needs.

By contrast, LESS Hat has a much smaller footprint and doesn’t seek to be an extensive framework. It has the LESS mixins that you need and nothing else.

Bottom line, if you’re looking to completely redefine and systematize the way that you build websites, check out Bootstrap. However, if you’re just a LESS user looking for some mixins, I definitely recommend checking out LESS Hat.

If you’re a LESS user, do you use any mixin libraries? Let us know in the comments.

Comments & Discussion

6 Comments

Comments & Discussion

6 Comments

  1. Maikel D says:

    Less Hat is a new one to me, but one that you missed, which I would definitely recommend is ClearLess.

    http://clearleft.github.com/clearless/

  2. dj says:

    @maikel … wow, just looked at ClearLess and it seems that it’s better than those listed in the article above (and perhaps even Compass??) – would like to see a review comparing ClearLess v compass (for their respective products) from a professionals point of view.

  3. Tim Rijkse says:

    I’m a big fan of DSS.less (https://github.com/mrkrupski/LESS-Dynamic-Stylesheet). Never needed anything else :)

  4. Petr says:

    Hey thanks for reviewing the LESS Hat mixins. :) I just pushed an update. LESS Hat now supports Variadic argument, so you can pass any number of arguments without ugly ~””. It’s really breaking news, so you cannot find more info in project homepage.

  5. ficod says:

    I’ve just started using less, and found this lib of mixins called “Lots of Love for LESS”.

    What I miss for all these emerging libraries is any kind of documentation (even if reading the code directly is usually easy… not for Less Hat).
    For example: it would BE really nice, for example referring to the Less Hat website which is clean and well done, to see the “compliled” code for each mixin.

    What I mean… I would like to see how, in detail these libs offer CSS3 to older browsers, expecially IE7 and IE8 (rgba? grandients?)

Leave a Comment

Subscribe
Membership
About the Author