Switching from SCSS to pure CSS — quick and painless

CSS is rapidly evolving and catching up with preprocessors. Now the language itself already has variables, nesting, color functions and cascading layers — the things that Sass was previously used for. So if you still have SCSS in your project, it may be time to switch to pure CSS. Below is a step-by-step guide on how to do it without pain and with pleasure 💅

✅ Checklist before transition

• 🔍 Audit Sass functionality (variables, mixes, nesting, @extend, loops)

• 🌐 Check support in browsers (for 2025: >90% support all key features)

• 🎯 Start with variables: replace $color with --color and use var(--color)

• 🔁 Rewrite mixins and functions to CSS classes and functions (calc(), clamp(), etc.)

• ✂️ Remove @extend and loops — replace with templates and custom properties

• 📁 Rebuild imports — use @import natively or through a compiler

• 🧪 Run tests: everything should look the same as before

🎨 Example 1: Variables

It was (SCSS):

$primary-color: #3498db;
.button {
  background-color: $primary-color;
}

Now (CSS):

:root {
  --primary-color: #3498db;
}
.button {
  background-color: var(--primary-color);
}

🎨 You can also use hsl(from var(--color) ...) to replace darken()/lighten().

📦 Example 2: Nesting

SCSS:

.card {
  .header {
    h2 {
      margin: 0;
    }
  }
}

CSS (nesting is supported natively!):

.card {
  & .header {
    & h2 {
      margin: 0;
    }
  }
}

🌈 Example 3: Color functions

SCSS: lighten($color, 10%)

CSS:

.primary-light {
  color: hsl(from var(--base-color-hsl) h s calc(l + 10%));
}

Or via color-mix:

.primary-dark-alt {
  color: color-mix(in srgb, var(--base-color) 85%, black);
}

🧠 Example 4: Functions and calculations

SCSS:

@function calculate-width($cols, $total: 12) {
  @return percentage($cols / $total);
}

CSS:

:root {
  --grid-columns: 12;
}
.column-4 {
  width: calc(4 / var(--grid-columns) * 100%);
}

🧩 Example 5: Mixins

SCSS:

@mixin button-style($color) {...}

CSS:

.button {
  color: white;
  background-color: var(--btn-color);
}
.primary-button {
  --btn-color: blue;
}

📱 Example 6: Media & Container Queries

SCSS: nested @media

CSS: container requests:

.sidebar {
  container-type: inline-size;
}
@container (max-width: 768px) {
  .sidebar-item {
    padding: 0.5rem;
  }
}

🧰 Where to continue?

Do you want to study CSS more deeply and learn how to create full-fledged web applications? 📱✨

In the Kodik application, you can take courses in HTML, CSS and JavaScript, learn layout and frontend development, create adaptive sites and animations. The course is suitable for both beginners and those who want to systematize their knowledge.

• 🧩 Practical exercises

• 🧪 Tests and projects

• 📜 Certificates and diplomas

• 🤖 Help from AI assistant

Learn CSS and become a frontend developer with Kodik!

🎯 Summary

Sass did its job — but CSS is no longer the same. Now you can write powerful, scalable styles without preprocessors. Start with one component, and you will be surprised how much easier everything has become.