19.7K
13.1K
+ 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 12.7K GitHub stars and 1.9K GitHub forks. Here’s a link to Sass's open source repository on GitHub

Who uses Sass?

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

Developers
15931 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 14 tools that integrate with Sass.
Public Decisions about Sass

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

Ali Soueidan
Ali Soueidan
Creative Web Developer at Ali Soueidan · | 18 upvotes · 635.7K views

Application and Data: Since my personal website ( https://alisoueidan.com ) is a SPA I've chosen to use Vue.js, as a framework to create it. After a short skeptical phase I immediately felt in love with the single file component concept! I also used vuex for state management, which makes working with several components, which are communicating with each other even more fun and convenient to use. Of course, using Vue requires using JavaScript as well, since it is the basis of it.

For markup and style, I used Pug and Sass, since they’re the perfect match to me. I love the clean and strict syntax of both of them and even more that their structure is almost similar. Also, both of them come with an expanded functionality such as mixins, loops and so on related to their “siblings” (HTML and CSS). Both of them require nesting and prevent untidy code, which can be a huge advantage when working in teams. I used JSON to store data (since the data quantity on my website is moderate) – JSON works also good in combo with Pug, using for loops, based on the JSON Objects for example.

To send my contact form I used PHP, since sending emails using PHP is still relatively convenient, simple and easy done.

DevOps: Of course, I used Git to do my version management (which I even do in smaller projects like my website just have an additional backup of my code). On top of that I used GitHub since it now supports private repository for free accounts (which I am using for my own). I use Babel to use ES6 functionality such as arrow functions and so on, and still don’t losing cross browser compatibility.

Side note: I used npm for package management. 🎉

*Business Tools: * I use Asana to organize my project. This is a big advantage to me, even if I work alone, since “private” projects can get interrupted for some time. By using Asana I still know (even after month of not touching a project) what I’ve done, on which task I was at last working on and what still is to do. Working in Teams (for enterprise I’d take on Jira instead) of course Asana is a Tool which I really love to use as well. All the graphics on my website are SVG which I have created with Adobe Illustrator and adjusted within the SVG code or by using JavaScript or CSS (SASS).

See more
Simon Reymann
Simon Reymann
Senior Fullstack Developer at QUANTUSflow Software GmbH · | 18 upvotes · 238.2K 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
Labinator Team
Labinator Team

At labinator.com, we use HTML5, CSS 3, Sass, Vanilla.JS and PHP when building our premium WordPress themes and plugins. When writing our codes, we use Sublime Text and Visual Studio Code depending on the project. We run Manjaro and Debian operating systems in our office. Manjaro is a great desktop operating system for all range of tasks while Debian is a solid choice for servers.

WordPress became a very popular choice when it comes to content management systems and building websites. It is easy to learn and has a great community behind it. The high number of plugins as well that are available for WordPress allows any user to customize it depending on his/her needs.

For development, HTML5 with Sass is our go-to choice when building our themes.

Main Advantages Of Sass:

  • It's CSS syntax friendly
  • It offers variables
  • It uses a nested syntax
  • It includes mixins
  • Great community and online support.
  • Great documentation that is easy to read and follow.

As for PHP, we always thrive to use PHP 7.3+. After the introduction of PHP 7, the WordPress development process became more stable and reliable than before. If you a developer considering PHP 7.3+ for your project, it would be good to note the following benefits.

The Benefits Of Using PHP:

  • Open Source.
  • Highly Extendible.
  • Easy to learn and read.
  • Platform independent.
  • Compatible with APACHE.
  • Low development and maintenance cost.
  • Great community and support.
  • Detailed documentation that has everything you need!

Why PHP 7.3+?

  • Flexible Heredoc & Nowdoc Syntaxes - Two key methods for defining strings within PHP. They also became easier to read and more reliable.
  • A good boost in performance speed which is extremely important when it comes to WordPress development.
See more
CDG

I use Laravel because it's the most advances PHP framework out there, easy to maintain, easy to upgrade and most of all : easy to get a handle on, and to follow every new technology ! PhpStorm is our main software to code, as of simplicity and full range of tools for a modern application.

Google Analytics Analytics of course for a tailored analytics, Bulma as an innovative CSS framework, coupled with our Sass (Scss) pre-processor.

As of more basic stuff, we use HTML5, JavaScript (but with Vue.js too) and Webpack to handle the generation of all this.

To deploy, we set up Buddy to easily send the updates on our nginx / Ubuntu server, where it will connect to our GitHub Git private repository, pull and do all the operations needed with Deployer .

CloudFlare ensure the rapidity of distribution of our content, and Let's Encrypt the https certificate that is more than necessary when we'll want to sell some products with our Stripe api calls.

Asana is here to let us list all the functionalities, possibilities and ideas we want to implement.

See more
Russel Werner
Russel Werner
Lead Engineer at StackShare · | 11 upvotes · 249.8K views

When we rebooted our front-end stack earlier this year, we wanted to have a consolidated and friendly developer experience. Up to that point we were using Sass and BEM. There was a mix of HAML views, React components and Angular. Since our ongoing development was going to be exclusively in React, we wanted to shift to an inline styling library so the "wall of classnames" could be eliminated. The ever-shifting landscape of inline CSS libraries for React is sometimes difficult to navigate.

We decided to go with Glamorous for a few reasons:

1) Previous team experience with this library 2) We can write our styles in plain JavaScript (which brings many benefits) 3) It supports server-side rendering 4) It has great composition patterns

As you may or may not know, Glamorous has ceased active development and been mostly superseded by Emotion. We are planning to migrate to either Emotion or @styled-components in the near future, and I'll write another Stack Decision when we get there!

#inlinecss

See more
Tassanai Singprom
Tassanai Singprom

This is my stack in Application & Data

JavaScript PHP HTML5 jQuery Redis Amazon EC2 Ubuntu Sass Vue.js Firebase Laravel Lumen Amazon RDS GraphQL MariaDB

My Utilities Tools

Google Analytics Postman Elasticsearch

My Devops Tools

Git GitHub GitLab npm Visual Studio Code Kibana Sentry BrowserStack

My Business Tools

Slack

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
13092 developers follow Sass to keep up with related blogs and decisions.
The Man From Earth
Hans Kuijpers
Robin van der Noord
Romain Cambonie
Thanh Lê Mỹ Thiên
Sandro Seiler
jack lennon
Marc Gavanier
Bharathy Seralathan
elron100duck