Sass Icon


Sass is a stable extension to classic CSS.
5 Stories
All Topics

Shopify Engineering Icon Shopify Engineering

Shopify engineers on replacing Sass

I love how Shopify’s Polaris team researched their options on replacing Sass in the open:

The Polaris team is exploring alternatives to Sass that better serve our current needs from CSS. Stay tuned for a follow up on our explorations and learning.

In the meantime, we want to know your thoughts on removing Sass! Join the conversation in the comments below..

The comment thread that follows details the pros and cons of many replacement options including Tailwind, CSS Modules, and vanilla-extract (which they ultimately decided on).

CodyHouse Icon CodyHouse

Benefits of CSS custom properties over Sass variables

While they may have been inspired by Sass variables, CSS custom properties are a whole other level of powerful, enabling some elegant new patterns in UI development. Just ask Sebastiano Guerriero:

Are they the same? Not really! Unlike SASS variables, custom properties 1) are scoped to the element they are declared on, 2) cascade and 3) can be manipulated in JavaScript. These three features open a whole new world of possibilities. Let me show you some practical examples!

Cathy Dutton

Stepping away from Sass

Cathy Dutton:

the more I looked at my old Sass files the more I questioned whether it was adding value to my site, or just an extra level of complexity and dependency. CSS has evolved over recent years and [sic] the problems that lead me to Sass in the first place seem to be less of an issue today.

Lots of great examples in Cathy’s post. While I’m not 100 percent convinced to leave Sass, its days are numbered. CSS has come a long way since I started using Sass in 2012, and while I feel the syntax settled on for variables is a bit verbose, there’s no question it’s pretty powerful.

Player art
  0:00 / 0:00