10.4K
6.8K
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 12K GitHub stars and 1.9K GitHub forks. Here’s a link to Sass's open source repository on GitHub

Who uses Sass?

Companies
2706 companies reportedly use Sass in their tech stacks, including Airbnb, StackShare, and Asana.

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

Sass Integrations

Compass, Bourbon, Ember-cli, Toolkit, and Jolteon are some of the popular tools that integrate with Sass. Here's a list of all 6 tools that integrate with Sass.

Why developers like Sass?

Here’s a list of reasons why companies and developers use Sass
Sass Reviews

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

Labinator Team
Labinator Team
at Labinator · | 13 upvotes · 5.3K views
atLabinatorLabinator
Debian
Manjaro
Visual Studio Code
Sublime Text
WordPress
PHP
Vanilla.JS
Sass
CSS 3
HTML5

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
Russel Werner
Russel Werner
Lead Engineer at StackShare · | 11 upvotes · 84.9K views
atStackShareStackShare
Emotion
JavaScript
Glamorous
React
HAML
Sass
#Inlinecss

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
Epistol
Epistol
at Epistol.fr · | 11 upvotes · 70K views
PHP
Bulma
Asana
Stripe
Let's Encrypt
CloudFlare
Deployer
Git
GitHub
Ubuntu
nginx
Buddy
Webpack
Vue.js
JavaScript
HTML5
Sass
Google Analytics
PhpStorm
Laravel
#CDG
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
Lee Benson
Lee Benson
Koa
React Router
Foundation
Semantic UI
Bootstrap
PostCSS
Less
Sass
styled-components
React Helmet
Webpack
TypeScript
JavaScript
Apollo
GraphQL
React
#JSX
#React.
#Css
#StyledComponents.
#Async
#HTML
#GraphQL
#Apollo

ReactQL is a React + GraphQL front-end starter kit. #JSX is a natural way to think about building UI, and it renders to pure #HTML in the browser and on the server, making it trivial to build server-rendered Single Page Apps. GraphQL via Apollo was chosen for the data layer; #GraphQL makes it simple to request just the data your app needs, and #Apollo takes care of communicating with your API (written in any language; doesn't have to be JavaScript!), caching, and rendering to #React.

ReactQL is written in TypeScript to provide full types/Intellisense, and pick up hard-to-diagnose goofs that might later show up at runtime. React makes heavy use of Webpack 4 to handle transforming your code to an optimised client-side bundle, and in throws back just enough code needed for the initial render, while seamlessly handling import statements asynchronously as needed, making the payload your user downloads ultimately much smaller than trying to do it by hand.

React Helmet was chosen to handle <head> content, because it works universally, making it easy to throw back the correct <title> and other tags on the initial render, as well as inject new tags for subsequent client-side views.

styled-components, Sass, Less and PostCSS were added to give developers a choice of whether to build styles purely in React / JavaScript, or whether to defer to a #css #preprocessor. This is especially useful for interop with UI frameworks like Bootstrap, Semantic UI, Foundation, etc - ReactQL lets you mix and match #css and renders to both a static .css file during bundling as well as generates per-page <style> tags when using #StyledComponents.

React Router handles routing, because it works both on the server and in the client. ReactQL customises it further by capturing non-200 responses on the server, redirecting or throwing back custom 404 pages as needed.

Koa is the web server that handles all incoming HTTP requests, because it's fast (TTFB < 5ms, even after fully rendering React), and its natively #async, making it easy to async/await inside routes and middleware.

See more
Julien DeFrance
Julien DeFrance
Full Stack Engineering Manager at ValiMail · | 6 upvotes · 8.8K views
atSmartZipSmartZip
Sass
Less
Bootstrap
#Stylesheets
#Sass
#GridFramework

Which #GridFramework to use? My team and I closed on Bootstrap !

On a related note and as far as stylesheets go, we had to chose between #CSS, #SCSS, #Sass , Less Finally opted for Sass

As syntactically awesome as the name announces it.

See more
Pierre Chapuis
Pierre Chapuis
at Pierre Chapuis · | 6 upvotes · 7.2K views
atChilliChilli
TSLint
Sass
Stencil
Angular 2

We chose Angular 2+ because our product has a rather complex back-office, most of which is visible only to our employees and contractors.

The "full featured" approach of Angular as well as the way it deals with the data model suited this business case well. We also use the Reactive Forms module a lot, as well as Clarity (an Open Source design system by VMWare) for the internal parts of the product. We also intend to use Angular's offline features.

For user-facing parts of the product we are now considering implementing views as Web Components with Stencil. We use Sass (SCSS syntax) for styling and TSLint to enforce a style guide close to Angular's default.

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 Stats

Sass's Followers
6840 developers follow Sass to keep up with related blogs and decisions.
Alex Duval
Carlos Pesina
Sarvarkhuja Murodov
CLFPosthumus
Arda Eren
Gaurav P
Sungwon Lee
mkythethinker
Gautam  Sharma
Sergio Varela