Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

It looks like LESS 1.4 is out of Beta, so we upgraded to it on CodePen. It’s an all-encompassing change, in that every Pen using LESS is now using 1.4 even if it was created before this upgrade. That’s how we plan to roll with upgrades of this nature.

If anything seems broken on your older LESS Pens, it’s likely a change in 1.4. Perhaps one of these:

• “maths is now only done inside brackets”
• “units are calculated, e.g. 200cm+1m = 3m, 3px/1px = 3. If you use units inconsistently you will get an error.”
• “(~”@var”) selector interpolation is removed. Use @{var} in selectors”

The biggest feature it seems to me is the addition of :extend. It’s like Sass @extend, which is highly useful, with slightly different syntax.

Here’s an example:

.button {
  padding: 12px 20px;
  border: 0;
  border-radius: 10px;
  margin: 5px;
  box-shadow: 0 5px 0 black;
}

.button--blue {
  &:extend(.button);
  background: #37b9c1;
}
.button--purple {
  &:extend(.button);
  background: #7952d0;
  color: white;
}
.button--red {
  &:extend(.button);
  background: #c63c67;
}

body {
  padding: 20px;
}Check out this Pen!

The default usage of :extend is slightly different in LESS than it is in Sass. LESS will not extend nested selectors by default. Chris Eppstein showed me how that might trip you up in this Pen. But also how using the all keyword fixes that in this Pen.

Other Upgrades

While we were at it, we also upgraded

Sass 3.2.7 to 3.2.9
CoffeeScript 1.2.0 to 1.6.3
Haml to 3.1.7 to 4.0.3 (we did this one last month)

We’ll do our best to stay on top of the latest and greatest versions of stuff. But if we’re ever behind, definitely let us know and we’ll get on it.