Need advice about which tool to choose?Ask the StackShare community!
Sass vs Stylus: What are the differences?
What is Sass? Syntactically Awesome Style Sheets. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
What is Stylus? Expressive, robust, feature-rich CSS language built for nodejs. Stylus is a revolutionary new language, providing an efficient, dynamic, and expressive way to generate CSS. Supporting both an indented syntax and regular CSS style.
Sass and Stylus can be categorized as "CSS Pre-processors / Extensions" tools.
"Variables" is the primary reason why developers consider Sass over the competitors, whereas "Simple" was stated as the key factor in picking Stylus.
Sass is an open source tool with 12K GitHub stars and 1.93K GitHub forks. Here's a link to Sass's open source repository on GitHub.
According to the StackShare community, Sass has a broader approval, being mentioned in 2082 company stacks & 1445 developers stacks; compared to Stylus, which is listed in 69 company stacks and 45 developer stacks.
Originally, I was going to start using Sass with Parcel, but then I learned about Stylus, which looked interesting because it can get the property values of something directly instead of through variables, and PostCSS, which looked interesting because you can customize your Pre/Post-processing. Which tool would you recommend?
We know that Sass is not a replace for CSS, but in my mind there is no CSS with no Sass.
One of the first complement/plugins I add to the environment, are the Sass processing files/demons.
I couldn't imagine going back to pure CSS. Sass is even the way to go, regarding Styled Components, CSS Modules, and all the other options.
JSS is makes a lot of sense when styling React components and styled-components is a really nice implementation of JSS. I still get to write pure CSS, but in a more componentized way. With CSS post-processors like SASS and LESS, you spend a lot of time deciding where your .scss or .less files belong, which classes should be shared, and generally fighting the component nature of React. With styled-components, you get the best of CSS and React. In this project, I have ZERO CSS files or global CSS classes and I leverage mixins quite a bit.
Pros of Sass
- Variables609
- Mixins593
- Nested rules467
- Maintainable410
- Functions299
- Modular flexible code150
- Open source142
- Selector inheritance112
- Dynamic107
- Better than cs96
- Used by Bootstrap5
- If and for function3
- Better than less2
- Custom functions1
- Inheritance (@extend)1
Pros of Stylus
- Simple69
- Indented syntax54
- Efficient38
- Built for node.js33
- Open source32
- Expressive24
- Maintainable21
- Feature-rich17
- Better than CS13
- Variables6
- Functions5
- @extend directive3
- Contempt for curly brackets2
- Very clean2
- Mixins2
- Is Easy2
- No colons, semi-colons or even curly braces2
- Its unique1
- Dynamic selectors1
- Scriptable1
- Easy Efficiently1
- Transparent1
- Supports orthogonal architecture1
Sign up to add or upvote prosMake informed product decisions
Cons of Sass
- Needs to be compiled3
Cons of Stylus
Sign up to add or upvote consMake informed product decisions
What is Sass?
What is Stylus?
Need advice about which tool to choose?Ask the StackShare community!
Sign up to get full access to all the companiesMake informed product decisions
Sign up to get full access to all the tool integrationsMake informed product decisions
Blog Posts
+33
+27+25
+20
+35+29