Do You Still Need Sass?

Sass has been a staple of front-end development for years. From the very beginning, it added features to CSS that improved the developer experience and helped make front-end code more maintainable.

But do we still need it? Native CSS has come a long way since Sass was released in 2006.

What can native CSS do in 2024?

We've leaned on Sass for many features critical to modern web development, but let's review some things native CSS can do.

Custom properties (or CSS variables)

Custom properties have been around since 2016 and can be used in place of Sass variables. The ability to set and use variables is a big reason people use Sass, and now CSS has it built-in.

 :root {
   --text-color: #333;
   --background-color: teal;
 }
 
.container {
  border: solid 2px var(--text-color);
  background-color: var(--background-color);
}

Since these aren't compiled into CSS like Sass variables, JavaScript can change them on the fly. 

const btn = document.querySelector('button');
const pageStyles = getComputedStyle(document.documentElement);

btn.addEventListener("click", toggleBackground);

function toggleBackground(event) {

  const currentBackground = pageStyles.getPropertyValue('--background-color');
  
  if (currentBackground === 'teal') {
    document.documentElement.style
    .setProperty('--background-color', 'pink');
  }
  
  else {
    document.documentElement.style
    .setProperty('--background-color', 'teal');
  }
}

However, you can't use them as a media query. We'll cover a workaround for this later.

Math in native CSS

calc() has been around for a while, but since 2023, we can now use trigonometric functions. sin(), cos(), tan(), and more. With these, you can create a clock using only CSS. You've always been able to do this with Sass.

Color functions

color-mix() is supported in all major browsers and can be used in place of Sass's mix() function. Use color mixing to lighten or darken or tint or shade a color. Sass's function takes only one percentage value, while color-mix() can take a percentage value for both colors, making it more flexible.

:root {
  --main-color: pink;
  --mix-color: white;
}

.container {
  border: solid 5px var(--main-color);
  ...
}

.container-css {
  background: color-mix(
    in srgb,
    var(--main-color) 15%,
    var(--mix-color) 85%
  );
}

Sass also can't use a CSS custom property in its color functions.
 

// This will not work
.container-sass {
  background: mix(var(--main-color), var(--mix-color), 15%);
}

Nesting

You can use nested element selectors in all major browsers.

ul {
  li {
    color: rebeccapurple;
  }
}

The features above might be all you need to stop using Sass and switch to native CSS. But maybe not. What if you want other Sass-like functionality on your site?

Using PostCSS to implement up-and-coming features

PostCSS is a NodeJS tool that transpiles CSS using various plugins. Some of these plugins replicate what is coming from the CSS Working Group, acting as a polyfill until all browsers support the feature. Other plugins replicate Sass features that may never be added to the CSS specification. And some are just nice to have. You can find a complete list on the PostCSS website, but we'll highlight a few here.

Plugins with future CSS syntax

Major browsers already support some of these, and things are changing constantly. However, these plugins are also a good way to support older browsers.

• postcss-custom-media: defines @custom-media following the Custom Media Specification. Remember how you couldn't use custom properties in media queries? This is the workaround.
• postcss-media-minmax: adds range notation defined by the Media Queries 4 Specification.
• postcss-preset-env: plugins that cover future CSS syntax.

Plugins that replicate Sass functionality

Many of these may not ever make it to the CSS specification. If you want to get away from Sass, these plugins will allow you to do that while carrying over some of its features.

• postcss-mixins: replicates the mixin() functionality of Sass
• postcss-map-get: replicates the map-get functionality of Sass
• postcss-define-function: replicates the function defining of Sass

Plugins with useful functionality

These plugins provide some odds and ends that we have found useful.

• cssnano: CSS minifier. There are other ways to minify your CSS, but this allows you to do it through a PostCSS plugin
• postcss-pxtorem: converts px units to REMs, so you don't have to do that REM math yourself.
• postcss-import: transforms import rules by inlining styles

Downsides to using PostCSS

Why would you want to use Sass at all, especially since you could do almost everything using PostCSS?

First, you might get used to plugins that don't follow CSS specifications. Once that functionality gets released, you'll have to update your code to make sure it meets the new syntax. Onboarding new developers could be difficult if you are committed to non-standard ways of doing things.

Second, too many plugins might affect performance. Build time and page loading could be slower. 

Finally, depending on the technology you use, setup can be confusing. There are several ways to run it, and documentation can be scattered.

What if you still want to use Sass?

If you're not ready to give up Sass yet, you can use Sass and native CSS together. For example, you can use custom properties with Sass variables. Depending on what you're doing, you can mix the two. You can predominantly use CSS custom properties but switch to Sass variables when using mixins and maps.

Sass also has its own version of calc(), which works with Sass variables. You can use this to avoid using math.div for the division operator.

:root {
  --background-color: #ddd;
  --container-width: 1024px;
}

$background-color: var(--background-color);
$container-width: var(--container-width);

.sass-with-custom-properties-and-calc {
  background-color: $background-color;
  width: calc($container-width / 2);  
  ...
}

So, should you still use Sass?

It depends!

Sass isn't going away anytime soon, so use it as much as you like. As long as you're using dart-sass, of course. There are several reasons why you might still use it.

• You don't feel like native CSS has caught up to Sass yet.
• You make use of complex mixins, functions, and maps.
• You still need to support legacy browser versions.
• Updating your codebase to remove Sass would be too time-consuming.
• Because you want to.

Conclusion

It's a great time to be a front-end developer. New additions to CSS, like custom properties and nesting, have been a long time coming and make our work cleaner. PostCSS enhances native CSS with quality-of-life features and adds functionality that Sass supports today. You can also use Sass and CSS together as you gradually switch over your codebase.