CSS Math Functions and Pre-Processors

With CSS Math Functions (aka min(), max(), clamp()) now being supported in all major browsers, it seem like a good time to re-evaluate the need for CSS pre-processors.

Sass is used on a lot of projects, and I ran into an issue where attempting to use min() threw an error. After some research, I found that if LibSass is being used as the compiler, min() and max() will always be parsed as Sass functions. Now there is a workaround to make it work, but it requires using a unique syntax. You can learn more in the min() and max() section of the Sass documentation, by clicking the arrow icon.

An interesting item to note is that if you use Dart Sass as the compiler, there's no need to use the unique syntax. However, it made me start to question if Sass is still even needed. I never jumped into the Sass pool with both feet, but instead always used it sparingly. Mostly for variables, media query mixins and some limited nested. Nesting though never really set well with me since it obfuscated class names, in addition to allowing selectors to easily increase specificity.

The State of CSS 2019 has some interesting data on Pre and Post Processors, with PostCSS and Sass having the highest level of satisfaction. But I'd be curious to know what the underlying factor(s) are that are driving usage, and how often the need to keep using is evaluated, if at all.

Moving forward, I still see Sass mixins as beneficial for managing media queries, but am currently evaluating the use of VS Code Snippets within a team environment as an alternative.