27.3K
19.3K
+ 1
3K

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.
Sass is a tool in the CSS Pre-processors / Extensions category of a tech stack.
Sass is an open source tool with 13.3K GitHub stars and 1.9K GitHub forks. Here鈥檚 a link to Sass's open source repository on GitHub

Who uses Sass?

Companies
3464 companies reportedly use Sass in their tech stacks, including Airbnb, Robinhood, and StackShare.

Developers
22730 developers on StackShare have stated that they use Sass.

Sass Integrations

Compass, Bourbon, node-sass, Vertica, and Ember-cli are some of the popular tools that integrate with Sass. Here's a list of all 16 tools that integrate with Sass.
Pros of Sass
604
Variables
587
Mixins
465
Nested rules
411
Maintainable
296
Functions
148
Modular flexible code
140
Open source
111
Selector inheritance
107
Dynamic
96
Better than cs
4
Used by Bootstrap
2
If and for function
1
Custom functions
1
Better than less
Decisions about Sass

Here are some stack decisions, common use cases and reviews by companies and developers who chose Sass in their tech stack.

awesomebanana2018
Shared insights
on
PostCSS
Stylus
Sass

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
Simon Reymann
Senior Fullstack Developer at QUANTUSflow Software GmbH | 19 upvotes 路 574.3K views

Our whole Vue.js frontend stack (incl. SSR) consists of the following tools:

  • Nuxt.js consisting of Vue CLI, Vue Router, vuex, Webpack and Sass (Bundler for HTML5, CSS 3), Babel (Transpiler for JavaScript),
  • Vue Styleguidist as our style guide and pool of developed Vue.js components
  • Vuetify as Material Component Framework (for fast app development)
  • TypeScript as programming language
  • Apollo / GraphQL (incl. GraphiQL) for data access layer (https://apollo.vuejs.org/)
  • ESLint, TSLint and Prettier for coding style and code analyzes
  • Jest as testing framework
  • Google Fonts and Font Awesome for typography and icon toolkit
  • NativeScript-Vue for mobile development

The main reason we have chosen Vue.js over React and AngularJS is related to the following artifacts:

  • Empowered HTML. Vue.js has many similar approaches with Angular. This helps to optimize HTML blocks handling with the use of different components.
  • Detailed documentation. Vue.js has very good documentation which can fasten learning curve for developers.
  • Adaptability. It provides a rapid switching period from other frameworks. It has similarities with Angular and React in terms of design and architecture.
  • Awesome integration. Vue.js can be used for both building single-page applications and more difficult web interfaces of apps. Smaller interactive parts can be easily integrated into the existing infrastructure with no negative effect on the entire system.
  • Large scaling. Vue.js can help to develop pretty large reusable templates.
  • Tiny size. Vue.js weights around 20KB keeping its speed and flexibility. It allows reaching much better performance in comparison to other frameworks.
See more

Sass Alternatives & Comparisons

What are some alternatives to Sass?
Stylus
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.
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 馃拝
PostCSS
PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.
Bootstrap
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Less
Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.
See all alternatives

Sass's Followers
19289 developers follow Sass to keep up with related blogs and decisions.