Battle of the LESS Mixin Libraries: LESS Elements vs. LESS Hat vs. Bootstrap
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.
2 Million+ Digital Assets, With Unlimited Downloads
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
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.
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.
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.
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:
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.
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!
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.
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.
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.
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.
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.