2

I’ve been looking into some of the Squarespace template design resources to better understand an existing template.. This got me looking at Less, and I’m not sure I’m seeing where it fits in. The documentation mentions Node.js and compiling Less, it seems like it’s basically JavaScript like stuff in CSS.

I’m not sure I see what Less is adding that couldn’t also be accomplished with some form of JavaScript and since it seems like it needs JavaScript anyways. Not sure if I’m just missing the point of Less or there’s something it does that couldn’t be done in JavaScript that I’m not seeing.

Slayer0248
  • 1,231
  • 3
  • 15
  • 26
  • Less is definitely more. Keep going. The whole point behind Less is that you use less CSS, keeping your stylesheets more compact and readable, as well as introducing useful features, such as variable definitions (for colour or size) etc. – Paul Dec 14 '17 at 09:00

1 Answers1

2

Everything Less does can be accomplished with Javascript but it wouldn't be practical using it to manipulate the stylesheet in every instance.

In Less, something like this:

@link-color: #428bca;

a {
    color: @link-color;
}

Would look like this in plain JS:

const linkColor = '#428bca';
document.getElementsByTagName('a').forEach(link => {
    link.style.color = linkColor;
});

You're giving the browser far more work interpreting Javascript and setting a style than serving it a generated CSS file that Less outputs.

It's also a separation of concern. Typically you'll use HTML for layout, CSS for styling and Javascript for interaction and picking up pieces where CSS may not be enough.

For best performance you'll use those in that order as needed.

Less must first be converted to CSS so browsers can interpret it and does not require Javascript to work. Seeing that including a Less file in your template on Squarespace should get converted automatically, you're giving each user no additional overhead in drawing styles on the page, speeding the site up.

northamerican
  • 2,185
  • 1
  • 20
  • 31