The hot topic that is all the rage among the Web Developers nowadays is “ Which CSS Preprocessor Language should a Web Developer choose ? If you are looking for a simple and short answer then the answer would be SASS but in case you want a little elaborated answer then you can say that SASS is good for a wide range of different fronts but in case you are already making use of LESS and are happy with then you can be pleased that you are doing some favor to yourself by doing some preprocessing. However if you want a detailed answer the you must read on this post to make a choice between LESS and SASS.
There are so many Web Developers who have been using LESS CSS religiously since quite a while and it has never been a problem for them to make use of CSS. Most of the Web Developers are intrigues by the thought of using Variable for creating a unique design by moving along the lines of a color palette for their themes and websites. The developers feel that if they have a fixed number of color options for selecting then it will help them prevent them from going color crazy and ensure that they do not deviate from any specific chosen style.
Coming to LESS and SASS for that matter these two technologies share loads many similarities in syntax and features which are listed below :
1) Namespaces –Group of Styles which can be called though references.
2) Scope – Allows you to make changes to various styles.
3) Mixins- Feature of having Classes within Classes
4) JavaScript Evaluation –Process of evaluating JavaScript Expressions in CSS
5) Parametric Mixins – These are classes that let you pass parameters such as passing functions as parameters
6) Operations- You can perform various mathematical operations inside CSS
7) Color Functions – You can edit your colors with the help of these functions
8) Nesting of Rules – You can cut down repetitive code by using classes within classes
The major difference between SASS and LESS is the manner in which these two languages are processed. SASS functions on Ruby and will be processed on server side whereas LESS is a JavaScript Library and hence is processed on the client side. There are several developers who prefer not to choose LESS for the reason that it requires extra time for processing the code through JavaScript engine and then output the modified CSS to the web browser. So to get around with this one can make use of LESS only for development process and once done with development , copy and paste the output of LESS into a minifer and after that into a separate CSS file which can be incorporated in place of the LESS files. One more way around with this is to make use of LESS.app file to compile and minimize your LESS files. In either ways you will be able to minimize the footprint of your CSS styles and as well deal with any problems which could be because of the clients web browser not supporting JavaScript. Despite the fact that this is not likely it is at all times a way around and the best possibility.
Let us have a comparison on LESS and SASS based on few important features :
1) Website Usability :
LESS is having more usable and a nice website whereas SASS documentation is not awful as it is complete and you can look for information that you need. However if you compare in terms of the attention it gets from Front End people LESS has an edge over SASS thus it is LESS which wins the popularity race among the front end people in terms of Website Usability but you never know it could change with time.
2) Handling Variables :
SASS makes use of the $ symbol for defining variables whereas LESS makes use of @ symbol for defining variables. The @ symbol has specific inherit meaning in CSS whereas the $ does not have any. It signifies declaration of @ Key frames or defining blocks of Media Queries using @Media Queries. Though this feature can be regarded as an aspect of personal preference and is not a big deal but the winning edge here can be given to SASS as it does not confuse the standing concepts. However one weird problem with SASS is that if a global variable is overwritten locally then the global variable will possess the value of the local variable which is somewhat weird.
3) @Extend Concept Feature :
Let us a consider that you declare a class which has a bit of styling and now you want to define another class which is having the same functionality as that of the previous class. Now with LESS you simply need to make use of the keyword “include” which is a mixin in both languages. In SASS also you can make use of the “include” for inheriting the properties of the class but a better way is to make use of @extend. When you are using @extend the styles from one class will not just be duplicated to the other class which is usually considered to be bloat. Thus SASS can be declared as the Winner here for inheriting the properties with @extend over LESS.
4) Implementation of Media Queries :
Initially developers used to work with media queries by adding blocks at the bottom of the main CSS Style sheet code which functioned properly but the problem was that it caused a mental disconnect between the responsive styles and the original styling. However now with SASS and LESS it is possible to combine those styles with the help of nesting rules. Implementing Media Queries through SASS is much more easier and sexier as there is this really cool to respond technique for using breakpoints and naming them.
So when choosing Pre-Processing Language it is you who has to make the choice as to what is that you exactly need and then make a wise decision.