Sass Features in CSS

The demise of Sass has long been foretold. Sass’ features are making their way into CSS, they say, so why bother with an additional build tool? I like that sentiment. What do they say about web platform tools again? Any good tool should live long enough to see itself made redundant. Something like that.

What’s interesting to me, though, is that it seems like only very recently have several of the features of Sass made their way into CSS. Sass was first out in 2006, and it took 10 years for one of Sass’ big features, variables, to make its way into CSS itself in the form of Custom Properties.

Early Sassification:

  • Basic Math (calc()) — 2012
  • Concatenating CSS matters slightly less (HTTP/2) — 2015
  • Variables (Custom Properties) — 2016

Then it’s taken until this year for any more of Sass features to get gobbled up:

  • Nesting — 2023
  • More Advanced Math (Trigonomic functions) — 2023
  • Color Manipulation (color-mix()) — 2023

A few more seem imminent because they already have a little browser support:

  • (More/Better) Color Manipulation (Relative Color Syntax) — Only Safari so far
  • Includes (CSS Module Scripts / Constructible Stylesheets) — Only Chrome so far
  • Mixins / Functions / Extend (Style Queries) — Only Chrome so far
  • Random — Strong discussion, anyway.

But there are some Sass features, fairly significant ones, that don’t seem to be on the future CSS radar at all at the moment:

  • Single-line comments (//)
  • Loops (@for, @each, @while)
  • Variable Logic (@if, @else)
  • Logging of values to console (@debug)

I’d say there is a pretty decent pile of stuff Sass can do that is helpful sometimes. But whatever, you do you.

Just while I’m thinking about it, it’s interesting to consider the CSS processing stuff that Sass chose not to do that other CSS processors do:

  • Prefixing / Older browser support help (Autoprefixer really gobbled up that market. You could write mixins and stuff to help yourself, but Sass didn’t really get into this.)
  • Minification (it has a “compressed” output option, but if you were serious about squishing CSS, dedicated tools always did better)
  • Future CSS (Again you could write a function or mixin or something, but Sass never intentionally tried to produce CSS that replicated what was coming down the CSS pipe. Interesting to see Lightning CSS try to take that up).
  • Plugin ecosystem (There was kind of plugins, the big one being Compass back in the day, but for the most part Sass add-ons were just importing other Sass code and even that wasn’t wildly popular).



I work on CodePen! I'd highly suggest you have a PRO account on CodePen, as it buys you private Pens, media uploads, realtime collaboration, and more.

Get CodePen PRO

One response to “Sass Features in CSS”

  1. Found myself asking a similar question recently. Just finished listening to and my takeaway is that while feature-parity isn’t there, idiomatic CSS can get most things done if I’m willing to re-learn the CSS toolset. Loops and variable logic in particular seem to be be areas where the SASS techniques can, and should be, rethought.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top ⬆️