Starting a new project and looking for CSS pre-processor, let’s find out which one is going strong.
A Brief Overview
CSS preprocessors are scripting languages which produce CSS that solves cross browsers compatiblity issues and it saves time and effort of CSS development. CSS preprocessors enhances the functionality of CSS, it automate repetitive tasks, reduce the number of errors and code bloat, create reusable code snippets, and ensure backward compatibility.
Spoiler alert: Stylus is much better than others but not in active development whereas SASS/SCSS has vast community and has inbuilt support with popular frameworks.
Every css preprocessors has their own syntax, some follows block formatting principle whereas some allows more flexibility. But here comes the most flexible yet contoversial syntax of Stylus which provides more than one ways to write code within one file or even in one block.
Regular CSS Syntax
No curly braces. No semicolons. No colons.
This minimalistic approach is biggest advantage of using Stylus and team members can follow their preferred style of writing code.
Using stylus writing complex mixins becomes more readable and it becomes easy to understand for developers, whereas SCSS and LESS have bit complicated approach of writing mixins.
Both Stylus and LESS allows nested extend feature whereas SASS/SCSS don’t.
As written in stylus docs: The Stylus @extend directive is inspired by (and essentially the same as) the SASS Implementation, with few subtle differences.
Refer Stylus Docs for detailed examples.
One more unique feature of Stylus is ability to reference properties defined without assigning their values to variables. Look at example of vertically and horizontally centering an element.
Refer Stylus Docs for Property Lookup for detailed description.
If you are a new to preprocessor ecosystem then go for Stylus or SCSS, do some research based on your project needs and decide one of them. LESS and others are not so great so avoid them.