Popularity of Css Preprocessors Diagram :

GitHub SaSS & Less Statistics :

SASS

• Variables start with $ sign.
• Sass is written in Ruby, and originally it also needed Ruby to compile the code, which deterred many developers from using it.
• The two most widely-used frontend frameworks, Bootstrap(4. version) and Zurb Foundation are both written in Sass.
• There are several notable companies who use Sass in their production sites, for instance Airbnb, Kickstarter, Hubspot, Zapier, Freshbooks, and many others.

SaSS Syntax Example

LESS

• Variables start with @ sign.
• Bootstrap’s decision to move Bootstrap 4 from LESS to Sass was a huge hit to the popularity of LESS, although it still has a LESS distribution.
• However, another popular framework called SEMANTIC UI is still written in LESS. Among the big companies using Sass are – Indiegogo, Patreon, and WeChat

LESS Syntax Example

STYLUS

• Stylus does not use @ or $ symbols for defining variables. Instead, Stylus uses the assignment operators to indicate a variable declaration. (=)
• We can remove all punctuation (brackets, semicolons, colons) but we can’t remove the assignment operator (=), as it indicates the declaration of a new variable.
• Stylus is written in Node.js so that developers can easily integrate it into their Node projects.
• Some noteworthy frameworks written in Stylus are Basis and Kouto Swiss. Among the big companies using Stylus are – Accenture, HackerEarth, Coursera.

STYLUS Syntax Example

Links:

https://www.lambdatest.com/blog/css-preprocessors-sass-vs-less-vs-stylus-with-examples/ https://2019.stateofcss.com/technologies/pre-post-processors/ https://htmlmag.com/article/an-introduction-to-css-preprocessors-sass-less-stylus https://raygun.com/blog/css-preprocessors-examples/ https://prezi.com/1zwi8zvd3nyq/sass-css-preprocessors-by-amita-and-nishutosh/