Many of the Sass features we've grown to love have made their way into native CSS in some shape or form. So, should we still use Sass? This is how developer Jeff Bridgworth is thinking about it.

CSS-Tricks is a go-to destination for web designers and front-end developers seeking insights into CSS techniques, web design trends, and best practices. Through a rich collection of articles, tutorials, and code snippets, CSS-Tricks equips developers with the knowledge and tools needed to create visually stunning and user-friendly websites. Whether you're looking to master CSS layout techniques, explore responsive design principles, or stay updated with the latest CSS features and browser compatibility issues, CSS-Tricks offers practical guidance and inspiration for elevating your web design skills.

CSS-Tricks

A developer reflects on 13+ years of using Sass and evaluates whether modern CSS features like native nesting, custom properties, and color-mix() function make it time to abandon CSS preprocessors. The analysis covers how native CSS has evolved to include many Sass-like features, discusses the complexity of modern tooling, and concludes that the decision depends on project size and requirements. For personal sites, moving away from Sass makes sense, but larger codebases may not justify the refactoring effort.

Is it Time to Un-Sass?

Sass imo added more cons than pros (even before css became more modern):
<ol>
<li>Nesting adds conflicting specificity you want to avoid, which makes devs use !important unnecessarily, which causes more problems (lookup: low specificity css)</li>
<li>CSS Variables existed since 2016, using Sass variables just limits your ability to work with newer css frameworks, debug (ex. colors) in dev console, and most most importantly their scope does not cascade like CSS variables which is extremely useful.</li>
<li>Bloat: Encourages devs to over-nest and many dont realize that everything in the selectors is duplicated with each nested selector.</li>
<li>Unpredictable selector structure also adds an unpredictable layer between the html and the styling, if you have <code>class=&quot;price__label&quot;</code> you could just search for that and find the styles, but <code>section div .label</code> doesnt allow you to do that (Tailwind even removes the searching layer and puts the styling directly in html)</li>
<li>Over-abstraction: Devs love to abuse the possibilities of a language/framework/… and write the most crazy code to look smarter or smth. Loops in css are unneeded unless you try to do doom in css. If you really need to generate helper classes there is UnoCSS. Otherwise just use an SVG.</li>
</ol>
Im not saying Sass didn’t have a use when it was created. 99.9% of projects though hurt themselves with Sass more than it helps and they don’t know it until it takes a whole day to figure out how to make that one button blue instead of orange. Thanks for reading my rant TED talk 😂

Yes, completely removed it from a project recently in favour of css. Also necessary if you want to move to tailwind 4

I don’t think Sass needs to be abandoned though. Native CSS has caught up a lot, but Sass still adds real value in bigger codebases. For small sites, sure, CSS variables and nesting are enough. But on bigger projects Sass still saves a ton of time.

so happy of never having to touch this trash and other so called pre-processors

Vanilla CSS is quite better nowadays, and if you do not wanna work with node_modules, CSS is even better. Tailwind 4 is pretty good as well.