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

Who uses Sass?

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

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

Sass Integrations

Compass, Bourbon, node-sass, Lad, and JSFiddle are some of the popular tools that integrate with Sass. Here's a list of all 12 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.

Ali Soueidan
Ali Soueidan
Creative Web Developer at Ali Soueidan · | 16 upvotes · 20.6K views
npm
npm
Babel
Babel
PHP
PHP
Adobe Illustrator
Adobe Illustrator
Asana
Asana
ES6
ES6
GitHub
GitHub
Git
Git
JSON
JSON
Sass
Sass
Pug
Pug
JavaScript
JavaScript
vuex
vuex
Vue.js
Vue.js

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
Labinator Team
Labinator Team
at Labinator · | 13 upvotes · 27.6K views
atLabinatorLabinator
Debian
Debian
Manjaro
Manjaro
Visual Studio Code
Visual Studio Code
Sublime Text
Sublime Text
WordPress
WordPress
PHP
PHP
Vanilla.JS
Vanilla.JS
Sass
Sass
CSS 3
CSS 3
HTML5
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
Epistol
Epistol
PHP
PHP
Bulma
Bulma
Asana
Asana
Stripe
Stripe
Let's Encrypt
Let's Encrypt
CloudFlare
CloudFlare
Deployer
Deployer
Git
Git
GitHub
GitHub
Ubuntu
Ubuntu
nginx
nginx
Buddy
Buddy
Webpack
Webpack
Vue.js
Vue.js
JavaScript
JavaScript
HTML5
HTML5
Sass
Sass
Google Analytics
Google Analytics
PhpStorm
PhpStorm
Laravel
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
Russel Werner
Russel Werner
Lead Engineer at StackShare · | 11 upvotes · 93.5K views
atStackShareStackShare
Emotion
Emotion
JavaScript
JavaScript
Glamorous
Glamorous
React
React
HAML
HAML
Sass
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
Tassanai Singprom
Tassanai Singprom
Slack
Slack
BrowserStack
BrowserStack
Sentry
Sentry
Kibana
Kibana
Visual Studio Code
Visual Studio Code
npm
npm
GitLab
GitLab
GitHub
GitHub
Git
Git
Elasticsearch
Elasticsearch
Postman
Postman
Google Analytics
Google Analytics
MariaDB
MariaDB
GraphQL
GraphQL
Amazon RDS
Amazon RDS
Lumen
Lumen
Laravel
Laravel
Firebase
Firebase
Vue.js
Vue.js
Sass
Sass
Ubuntu
Ubuntu
Amazon EC2
Amazon EC2
Redis
Redis
jQuery
jQuery
HTML5
HTML5
PHP
PHP
JavaScript
JavaScript

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
Lee Benson
Lee Benson
Koa
Koa
React Router
React Router
Foundation
Foundation
Semantic UI
Semantic UI
Bootstrap
Bootstrap
PostCSS
PostCSS
Less
Less
Sass
Sass
styled-components
styled-components
React Helmet
React Helmet
Webpack
Webpack
TypeScript
TypeScript
JavaScript
JavaScript
Apollo
Apollo
GraphQL
GraphQL
React
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

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
7252 developers follow Sass to keep up with related blogs and decisions.
Jonatan Witoszek
Ali Soueidan
Prakash Pal
IzWOP
emrah karahan
Дилик Пулатов
Breno Baptista
Carlos Escamilla
Ameen MK
chunrong liu