What you need to know about Less and Squarespace

What is less?

LESS stands for Leaner Style Sheets. It can speed up your CSS coding considerably. Allowing dynamic parts of code that simply make writing CSS a lot quicker.

Less outputs CSS at the end of the day.

It’s a preprocessor which means that the actual Less file has to be run through a machine. Squarespace handles all that for you. Using other web-building options such as CraftCMS, we would have to set up Less through someone like NPN. Which allows you to run little bits of software that help you build websites which we have done in our custom Squarespace templates. Squarespace makes it easy for you, you don't need to do anything.

In Squarespace you don’t need to worry about setting up a local machine to run it or set up up NPM, Squarespace makes it incredibly easy to write less. You just type the code in and it does all that magically in the background for you.

An important point to remember is that Less is fully compatible with CSS. You can write your whole Less file with plain CSS and not use any Less features whatsoever and your CSS will work just fine. Less extends CSS, but all CSS works within it too.

Less features that you can use in Squarespace:

Nesting

In traditional CSS, you would write something like

header { padding:1em 0; }
header h1{ font-size:1.2em}
header h1 span{ font-size:.9em}

In Less you can make that easier by writing just:

header { padding:1em 0;
 h1 { font-size:1.2em;
 span{font-size:.9em; }
 }
}

It should be noted that you can nest things in traditional CSS too in some browsers. Unfortunately, browser support is limited but soon we will be able to nested elements this way.

Variables

In a large stylesheet, you will find yourself repeating things over and over. With Less, you can use variables which you can write a value once, then use it over and over. The beauty in this is that you can change the value at the top of the file and every other instance will update automatically, saving you a lot of time.

You can write variables like

@link-color: #428bca;

Then further down the code:

a.link {
color: @link-color;
}
.widget {
color: #fff;
background: @link-color;}

Very handy indeed.

Using Media Queries

You can also use media queries like variables. This would allow you to update the media query width once at the top and all other instances would be updated too. Again, this can save a lot of time and hassle.

@tablet: ~"(min-width: 1024px)";
.element {
@media @tablet {
background-color:red;
}
}

Conclusion

The above techniques are handy but there is a lot more to Less than that. Remember though that standard CSS can be written in LESS and it will work as expected. This is great news as it means you build up your Less skills little bit by little bit, replacing out parts of your traditional CSS with Less as your skills grow.

Happy coding.

If you have any questions or comments don’t be afraid to hit me up on X/Twitter and I’ll respond on there.