Eren
At the start of 2024, I wrote about how Native CSS had evolved significantly, reducing the need for Sass dependency and showing how class naming conventions — used meaningfully and reusable — could maximize our CSS efficiency.
I’ve been a longtime Sass user, but in 2024 I decided to stop using Sass entirely, and none of my projects that year included Sass.
So, do I regret it?
Before answering, let’s take a look at what changed in the CSS world by 2025.
Variables (CSS Custom Properties)
Sass variables are resolved at compile-time, while CSS custom properties can be updated at runtime in the browser. That makes them far more flexible for scenarios like theming or dark mode, where you need values to change dynamically.
2024 : %95+ browser support
2025: %99+ browser support
// ------------ SCSS ----------- //
$primary-color: #3888ff;
.button {
background-color: $primary-color;
}
/* ------------ CSS ------------ */
:root {
--primary-color: #3888ff;
}
.button {
background-color: var(--primary-color);
}
Nesting
One of Sass’s most famous advantages — nesting — is now almost fully supported in CSS as well, which significantly reduces the need for Sass. That said, Firefox may require a few phased updates, so we might only see near-complete support by the latter half of 2025.
2024 : %88+ browser support
2025: %92+ browser support
// ------------ SCSS ----------- //
nav {
ul {
list-style: none;
li {
display: inline-block;
}
}
}
/* ------------ CSS ------------ */
nav {
& ul {
list-style: none;
& li {
display: inline-block;
}
}
}
Partials — Modules
In SCSS, you can create separate .scss files for specific areas (e.g., _input.scss for form elements) and import them into a main file, such as _form.scss. This modular approach helps you manage styles in one place.
On the CSS side, it’s also possible to split a project into multiple files. We used to rely on @import, though that’s not recommended anymore because it triggers extra HTTP requests. Modern bundlers (Webpack, Vite, etc.) typically combine all CSS into one final output. So effectively, “splitting files and reassembling them” is just as feasible with CSS.
2024 : %97+ browser support
2025: %99+ browser support (basic @import usage)
// ------------ SCSS ----------- //
// _buttons.scss
.button {
padding: 1rem;
border-radius: 4px;
}
// main.scss
@import 'buttons';
/* ------------ CSS ------------ */
/* main.css */
@import url('buttons.css');
/* buttons.css */
.button {
padding: 1rem;
border-radius: 4px;
}
Operators (Calculation Functions)
In SCSS, you can perform basic arithmetic operations. Native CSS offers a variety of calculation functions, such as calc(), var(), clamp(), min(), and max(). For layout, we even have fit-content() and repeat().
2024 : %96+ tarayıcı desteği
2025: %98+ tarayıcı desteği
/* ------------ CSS ------------ */
.container {
width: calc((100% - 20px) / 2);
}
New Native CSS Features
Container queries
Also called “CSS Container,” container queries let you style elements based on the dimensions of their parent container, which is a huge step forward for modular, reusable components.
2025: %94+ browser support
/* ------------ CSS ------------ */
.container {
container-type: inline-size;
container-name: card;
}
@container card (max-width: 400px) {
.text {
font-size: 1rem;
}
}
@scope (CSS Scope)
@scope is aimed at ensuring that your styles only affect specific elements or a subsection of the DOM. It’s still quite new; even by 2025, full support hasn’t been reached. In the near future, though, @scope will make component-level styling a breeze.
2025: %88+ browser support
/* ------------ CSS ------------ */
@scope (.card) {
.title {
color: blue;
}
}
:is() , :where() , :has()
We already covered this in a previous video. :is() and :where() were widely supported even back in 2023. :has() gained traction after Safari’s early adoption and other browsers followed by the end of 2024. By 2025, it’s comfortable to use in nearly all modern browsers.
2025: %98+ browser support
/* ------------ CSS ------------ */
.card:has(img) {
border: 2px solid green;
}
nav :is(ul, ol) {
list-style: none;
}
@layer (Layered CSS)
This feature allows you to define layers in your style sheets, specifying which rules should load first and which later. It helps maintain order in large codebases by giving you more controlled overrides. By 2025, most modern browsers support it.
2025: %96+ browser support
/* ------------ CSS ------------ */
@layer base {
h1 {
font-family: sans-serif;
}
}
@layer theme {
h1 {
color: red;
}
}
Features Sass Has That CSS Doesn’t (Yet)
Sass’s most popular features — Mixins, Extends/Inheritance, Loops, and Conditional Logic — don’t have direct equivalents in Native CSS. However, reusable class naming and modern CSS properties can remove much of that need. Plus, we can handle more complex scenarios with certain emerging tools or approaches.
:root {
--primary-color: #3888ff;
--gradient: linear-gradient(
color-mix(in srgb, var(--primary-color) 20%, white)
);
}
Conclusion
As I mentioned in the piece I wrote at the beginning of 2024, Sass is no longer the indispensable tool it once was. With new CSS features, you rarely need a separate preprocessor. By 2025, the CSS ecosystem has basically caught up to (and partially surpassed) Sass’s core benefits, thanks to direct browser support.
Still, Sass won’t disappear overnight. Legacy codebases, advanced plugins, and community habits mean Sass will remain around for quite a while.
Do I regret dropping Sass? Absolutely not.
By moving away from Sass, I avoided the extra setup and compile overhead. This reduced both the performance and management load on my projects. I also saw solid PageSpeed scores and W3C validator results.
Bonus — AI-Assisted Development (2025)
By 2025, AI has become an integral part of our daily routines. In web development, tools like ChatGPT, Claude 3.5, Copilot, and Cursor can automate many routine tasks in CSS and Sass projects, from code conversion and cleanup to optimization and documentation. That said, as of the date of this article, fully handing over a project to AI might not be the healthiest approach. The best strategy is to collaborate with these tools in a controlled way!
I also share content about general web technologies and the wider web ecosystem on my YouTube channel — hope to see you there!
Sources
