Need advice about which tool to choose?Ask the StackShare community!
Pug vs Stylus: What are the differences?
What is Pug? Robust, elegant, feature rich template engine for nodejs. This project was formerly known as "Jade." Pug is a high performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers.
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.
Pug belongs to "Templating Languages & Extensions" category of the tech stack, while Stylus can be primarily classified under "CSS Pre-processors / Extensions".
"Elegant html" is the top reason why over 118 developers like Pug, while over 65 developers mention "Simple" as the leading cause for choosing Stylus.
Pug is an open source tool with 18.4K GitHub stars and 1.9K GitHub forks. Here's a link to Pug's open source repository on GitHub.
According to the StackShare community, Pug has a broader approval, being mentioned in 174 company stacks & 119 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?
Pros of Pug
- Elegant html138
- Great with nodejs90
- Open source59
- Very short syntax59
- Structured with indentation54
- Free25
- Really similar to Slim (from Ruby fame)6
- It's not HAML6
- Gulp6
- Clean syntax5
- Readable code5
- Easy setup5
- Difficult For Front End Developers,learn backend5
- Disdain for angled brackets4
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