Work with us

To contact our team enter your details below and we will be in touch as soon as possible.

Download

To download "" please enter your email address below

Menu

22

Jul

LESS vs. Sass. What’s the difference?

LESS vs. Sass. What’s the difference?
A few years ago, our team of Developers discussed the difference between LESS v Sass. Since then, CSS has updated, and has resulted in an enhanced version of LESS vs Sass. Our team of digital experts have updated the debate between the two powerful CSS preprocessors and have explored the range of features and functionalities between the two. 

There’s no denying that CSS is important and amazing. However, there’s always room for improvement. This is where CSS preprocessors come in, adding features in order to create a more readable and easier to write CSS structure.

The existing structure of CSS makes it impossible to build and reuse functions, or tackle problems that object oriented languages handle perfectly. CSS preprocessors extend the CSS language, adding the ability to introduce variables, mixins, functions and more, all helping to make your project easier to maintain.

LESS and Sass are both powerful CSS preprocessors, aiming to cut down development time whilst still producing results of a high standard. They both do a great job, so what’s the difference between the two?

One feature that Sass has that is better than LESS is the use of loops. LESS does allow the use of 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 great quality of Sass is that it gives you the ability to define reusable styles in the form of mixins. Mixins are especially helpful when it comes to developing for even partial cross-browser support. Anyone who’s tried to implement CSS transitions knows the struggle of using -webkit, -moz- and -ms to try and achieve the best results on all browsers. Sass allows you to create a mixin which adds these prefixes to any styling rule and just like that you have support across all browsers!  

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 is likely to cause some very painful headaches.

However, there are some positive features that both Sass and Less offer. Both preprocessors support include and extend making it easier for you to better organise your styles. Also, both LESS and Sass are open-source, meaning they’re free to use, and 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.

If you need any other information on this or are looking at getting a new website, please don’t hesitate to call a member of our team on 0800 084 3086