Home Contact
Call us Careers
Awwwards: Honorable Mention

LESS vs. Sass. What’s the difference?

10th July 2017 By Ollie Davies
CSS is amazing, there’s no doubt about that. But as with any coding language, there’s always room for improvement. LESS and Sass are CSS preprocessors that aim to cut down development time but still produce the same results. They both do a brilliant job, so what’s the difference between the two?

The existing structure of CSS makes if impossible to build and reuse functions, or tackle problems that object oriented languages handle perfectly, like inheritance. Working on a large project that isn’t object oriented slows down development and makes maintenance a huge burden. CSS preprocessors extend the CSS language, adding the ability to introduce variables, mixins, functions and more, to help make your project more maintainable and extendable.

One thing Sass does better than LESS is loops. LESS does allow to loops, but only by recursive calling, which doesn’t sit well with developers who use while or for loops in other programming languages. Recursive calling loops are more difficult to write and can make maintenance a nightmare.

Another thing Sass does really well is cross-browser support. Anyone who’s tried to implement CSS transitions knows the struggle of using -webkit, -moz- and -ms to try and get even partial cross-browser support. Sass lets you to write one CSS rule, and it adds all the extra cross-browser rules for you. Automatically!

Both preprocessors support include and extend so you can better organise your styles. But one thing that lets both languages down, is their use of the @ symbol. @ is used in vanilla CSS to define keyframes, so should be out of bounds for something attempting to closely resemble CSS. LESS uses the at symbol to define variables, and Sass uses it to call extend. This will likely cause some very painful headaches.

The engines used to convert LESS and Sass into vanilla CSS are different. Jo Liss wrote a blog article comparing the speed of the two preprocessors. When compiling the same 200kb file, LESS compiled in 0.5 seconds and Sass took 4.9 seconds so there’s definitely a clear winner, but there’s many ways to improve the performance of both.

Both LESS and Sass are open-source, so they’re free to use, and both are cross-platform so they work on many operating systems. So, which one is our favourite here at Kolodo? Without a doubt, Sass. A combination of the loop functionality and the cross-browser consideration makes it impossible for us to not use.

More from our Journal

The industry is changing by the second, and so are we. Keep up to date with the latest by reading the articles below.

How to rank in Google image search

How to rank in Google image search

1 out of every 3 Google searches is for an image. If you're trying to drive more organic traffic to ...

21st August 2017
What is Bootstrap, and when should it be used?

What is Bootstrap, and when should it be used?

Bootstrap is arguably the most popular CSS framework on the web. It has been downloaded over 25.5m t...

18th August 2017
Google Chrome to penalise websites without an SSL certificate

Google Chrome to penalise websites without an SSL certificate

Google are due to release an update to the popular Google Chrome web browser in October that will pe...

17th August 2017
Our digital marketing services have just launched!

Our digital marketing services have just launched!

We're really pleased to announce the launch of our new digital marketing services. As our team expan...

14th August 2017
Adobe to scrap Flash by 2020

Adobe to scrap Flash by 2020

It's finally been announced! Adobe have said that they will phase out Flash Player by the end of 202...

26th July 2017
SUPEE-9767 (v2) security update released for Magento

SUPEE-9767 (v2) security update released for Magento

A patch is set of modifications that make improvements to existing code, but don’t alter core func...

14th July 2017

How can we help?

No matter the size of your project or digital marketing campaign, we'd love to hear from you! Get in touch below or call us on 01244 566 566.