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
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
-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
extend so you can better organise your styles. But one thing that lets both languages down, is their use of the
@ 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.
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.