What is SASS and how is it different from LESS CSS?

What is SASS?

SASS stands for (Syntactically Awesome Stylesheets) is an extension of CSS. It is a CSS preprocessor and also powerful, mature CSS language that provides clean and structural style of document. SASS was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006. Later Chris Eppstein used its initial version to extend it with SASS script. SASS saves lots of time by reducing repetition. SASS consists of two syntaxes SCSS (Sassy CSS) and indented syntax (SASS syntax or its own syntax). SCSS file uses the extension .scss and SASS file uses the extension .sass.

Features

• Inline comments used in SASS at beginning or at end can be helpful to you and the person who later steps into it, you can include SASS comments along with CSS comments.
• In SASS, you can create global as well as local variables and can also override wherever needed. Global variables are used to create color names and semantic use of those colors whereas local variables are declared inside a selector.
• It provides many functions for changing colors and many other values.
• Using SASS, allows customizable and well formatted or well-structured results.
• Reusability once defined can be re-used whenever required.
• SASS uses indented syntax and compile it into readable CSS.
• Best feature of SASS is time saving by writing less code in less time.
• Like LESS, SASS is also an open source which is interpreted into CSS.
• Using mixins, you can create group of styles which can be reused wherever needed throughout the code.
• SASS provides number of rules like @extend, @root, @debug, @warn, @error and many others.
• SASS supports many output styles like :nested, :expanded, :compact and :compressed.
• It is compatible with all versions of CSS.
• It has better language ability.

Difference Between SASS and LESS CSS

• Year of release: LESS released on September 25, 2015 and SASS released in October 9, 2015.
• Created by: SASS designed and created by Hampton Catlin, Natalie Weizenbaum and Chris Eppstein in 2006 and LESS is designed and created by Alexis Sellier.
• Installation: SASS is based on Ruby and requires ruby install whereas LESS was constructed in Ruby but later has been turned into JavaScript.
• Language: Both SASS and LESS are CSS preprocessors and both have their own language
• Extensions: Both LESS and SASS have different extensions available for mixins. LESS has Preboot.less, LESS elements, LESS mixins, gs, Frameless etc. whereas SASS has awesome framework Compass which includes all the options available for future references.
• Mixins and selectors: In SASS, you can use @mixin directive but in LESS, it is defined with a class selector. SASS doesn't copy the properties simply group and extend selectors which have same properties and values via @extend directive. LESS mixins doesn't allow selector inheritance, it allow guarded mixin and SASS supports selector inheritance.
• Nesting: In LESS, you cannot nest individual characteristics but SASS allows nesting of individual characteristics also.
• Operations: SASS and LESS both perform mathematical functions like addition, subtraction, multiplication and division. But SASS provides more accurate results as compared to LESS.
• Documentation: Documentation in SASS is more comprehensive, whereas in LESS documentation is clearer, with great color schemes and typography etc.
• Error messages: As we know, an error notification is a best way to figure out the problem and both LESS and SASS has error messages to find out the problem in code. So if we compare LESS has more accurate error notification and location of the error than SASS.
• Variables: Variables in SASS are assigned with dollar sign ($) and in LESS variables are assigned via @ symbol. In LESS, @ sign is used which sometimes create problem because many CSS selector use same symbol which create confusion.
• Processing: SASS supports server-side processing whereas LESS supports client-side processing.

Conclusion

At last we can say that CSS preprocessor are very powerful and speed up your development process and makes your work easier. Both LESS and SASS have certain advantages and disadvantages. If you will start using these preprocessors, then only you will come to know which is better than other. But you should consider both and take advantage of their wonderful and feature rich framework which will provide you cleaner and clearer code in a readable way.