Pug

1K
839
+ 1
403
Sass

19.6K
13.1K
+ 1
3K
Add tool

Pug vs Sass: What are the differences?

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; 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.

Pug and Sass are primarily classified as "Templating Languages & Extensions" and "CSS Pre-processors / Extensions" tools respectively.

"Elegant html", "Great with nodejs" and "Open source" are the key factors why developers consider Pug; whereas "Variables", "Mixins" and "Nested rules" are the primary reasons why Sass is favored.

Pug and Sass are both open source tools. It seems that Pug with 18.3K GitHub stars and 1.9K forks on GitHub has more adoption than Sass with 12K GitHub stars and 1.93K GitHub forks.

StackShare, HubSpot, and thoughtbot are some of the popular companies that use Sass, whereas Pug is used by Sellsuki, triGo GmbH, and Key Location. Sass has a broader approval, being mentioned in 2082 company stacks & 1445 developers stacks; compared to Pug, which is listed in 173 company stacks and 118 developer stacks.

Advice on Pug and Sass
awesomebanana2018
awesomebanana2018
Needs advice
on
StylusStylusSassSass
and
PostCSSPostCSS

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?

See more
Pros of Pug
Pros of Sass

Sign up to add or upvote prosMake informed product decisions

Sign up to add or upvote consMake informed product decisions

What is Pug?

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 Sass?

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 companies use Pug?
What companies use Sass?

Sign up to get full access to all the companiesMake informed product decisions

What tools integrate with Pug?
What tools integrate with Sass?

Sign up to get full access to all the tool integrationsMake informed product decisions

What are some alternatives to Pug and Sass?
EJS
It is a simple templating language that lets you generate HTML markup with plain JavaScript. No religiousness about how to organize things. No reinvention of iteration and control-flow. It's just plain JavaScript.
Handlebars.js
Handlebars.js is an extension to the Mustache templating language created by Chris Wanstrath. Handlebars.js and Mustache are both logicless templating languages that keep the view and the code separated like we all know they should be.
React
Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
TypeScript
TypeScript is a language for application-scale JavaScript development. It's a typed superset of JavaScript that compiles to plain JavaScript.
Mustache
Mustache is a logic-less template syntax. It can be used for HTML, config files, source code - anything. It works by expanding tags in a template using values provided in a hash or object. We call it "logic-less" because there are no if statements, else clauses, or for loops. Instead there are only tags. Some tags are replaced with a value, some nothing, and others a series of values.
See all alternatives
Interest over time