Quick Guide To CSS Preprocessors

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • stylus

    Expressive, robust, feature-rich CSS language built for nodejs

  • The Stylus is built on Node.js. It differs from Sass and Less, which are more opinionated to the syntax; the stylus allows you to omit semicolons, colons, and braces if you want at any time. Another cool feature is that the stylus has a property lookup feature. You can do that easily if you set property X relative to property Y's value. The stylus can be more concise because of its flexibility, but it depends on your preferred syntax.

  • Sass

    Sass makes CSS fun!

  • SASS stands for Syntactically Awesome Style Sheets. It has mainly two choices for syntax, i.e., Sass and SCSS. Currently, because of version 3.0, SCSS is the official syntax. SCSS is closer to regular CSS, making migrating easier. The significant difference between the two is using parentheses and semicolons. Sass is viable with all versions. It has a large group, has been around for over 15+ years, and has more features than the other CSS preprocessors—additionally, a few supportive structures around Sass, similar to Compass and Bourbon.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • less.js

    Less. The dynamic stylesheet language.

  • LESS is short for Leaner Style Sheets. It's designed to be as near to regular CSS as expected, as the syntax is the same. Less runs in the browser inside Node JavaScript. With Less, compilation happens via less.js in your browser. It is okay with fast, modern browsers; however, we must be aware of old browsers. As well as, Less.js caches the CSS in the browser, so there is no need to regenerate for the user every single time.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts