Can Vanilla CSS Replace Sass Yet?

Episode Summary

Executive Summary: The episode argues that modern, vanilla CSS can replace much of Sass for new projects thanks to native variables, nesting, and evolving color/math APIs, while PostCSS fills remaining gaps for older browser support and bundling. The hosts conclude Sass is still useful for some edge cases, but they would choose native CSS plus PostCSS for a new project today.

Main Topics: Sass vs native CSS in 2023: The hosts frame the episode as a feature-by-feature comparison of Sass and modern CSS, asking whether Sass is still necessary for new projects. CSS variables as a Sass replacement: They strongly favor CSS custom properties over Sass variables because they are live, scoped, dynamic, and better suited for themes and runtime updates. Native CSS nesting: They discuss CSS nesting now landing in browsers and note it closely matches Sass syntax, including media query nesting and selector breakout behavior. Colors and math in CSS: They cover new built-in color and math functions such as color-mix, relative colors, clamp, min/max, abs, and trig functions as evidence CSS is catching up. What Sass still does better: They identify looping, mixins, partials/imports, and BEM-style selector concatenation as areas where Sass or Sass-like tooling still has advantages or niche value. PostCSS as the bridge: PostCSS is presented as the practical tool for compiling modern CSS features for older browsers, handling prefixes, imports, and spec-targeted transforms.

Key Arguments: CSS variables are superior to Sass variables because they are live at runtime, scope naturally, and support dynamic theming. CSS nesting in the browser is now close enough to Sass nesting that most projects can switch without losing much functionality. PostCSS preset-env lets developers write to the CSS spec while compiling unsupported features for older browsers. Native color and math APIs reduce the need for Sass color functions and many calculation helpers. Looping and mixins are increasingly unnecessary because modern CSS selectors, variables, grid/flexbox, and JavaScript/inline styles cover many use cases. Partial imports remain a real weakness in native CSS because @import creates request waterfalls, making Sass or PostCSS import handling still valuable. For new projects, the hosts would choose vanilla CSS plus PostCSS over Sass, but they do not consider Sass bad or obsolete.

Data Points: CSS nesting support: Safari Technology Preview / modern browsers via compilation - They say nesting has landed and can be compiled back to standard CSS with PostCSS for all browsers. Browsers supporting abs(): Safari 15.4+, Chrome 52+, IE 10 (mistakenly mentioned then corrected in the conversation) - They discuss CSS math functions and absolute value support, then correct the confusion to position: absolute. Cotton candy machine price: $200 USD / $250 CAD - Wes describes the machine he bought for kids’ birthday parties. Cotton candy machine rental: $60 per birthday party - Wes cites Facebook Marketplace rentals as a comparison. Math class format: 3 books in 2 years; exam every other week - Scott describes an intensive high school math program. Fallback color example: 20 colors × 8 derived colors - Used to illustrate the tradeoff between precompiling many variants versus computing with a variable at runtime. Hue range in HSL: 0 to 360 degrees - Used in the rainbow gradient example that required multiple stops. Rainbow stop spacing: Every 45 degrees - Scott added eight gradient stops to produce visible rainbow transitions.

Pivotal Quotes: "I think if you are, a SAS is not awful. However, I would not pick it up for a new project given what the future looks like." — Scott: The episode’s closing verdict on Sass adoption for new projects. "I am a big SaaS head." — Wes: Wes clarifies that he is pro-Sass historically and not arguing against it. "The fact that it is live becomes really super important in dealing with dark mode, light mode, themes, sizes, anything." — Wes: Why CSS variables are a major upgrade over Sass variables.

Implications: Listeners should expect modern CSS to keep absorbing Sass use cases, especially with variables, nesting, and color/math APIs. For new projects, native CSS plus PostCSS is becoming the default path, while Sass remains useful mainly for legacy workflows and edge cases.