Για χρόνια, το πρώτο βήμα σε κάθε front-end project ήταν σχεδόν αυτόματο: εγκατάσταση Sass. Η σκέτη CSS δεν είχε nesting ή μεταβλητές. Ούτε βοηθούσε σε μια αρθρωτή αρχιτεκτονική χωρίς συνεχείς μάχες με το specificity.

Ο compiler δεν ήταν αρχιτεκτονική επιλογή. Ήταν ο μόνος πρακτικός τρόπος για να μείνουν τα stylesheets διαχειρίσιμα.

Σήμερα, αυτό το αντανακλαστικό αξίζει να το ξανασκεφτούμε. Η πλατφόρμα κάλυψε σχεδόν όλους τους λόγους για τους οποίους χρησιμοποιούσαμε preprocessors. Και πήγε πιο μακριά, σε σημεία όπου ένας compiler δεν μπορεί να φτάσει.

Όσα κάλυψε η native CSS

  • Nesting. Υποστηρίζεται σε όλους τους browser engines και είναι Baseline από το τέλος του 2023. Γράφετε nested κανόνες όπως στο Sass, χωρίς compiler.
  • Custom properties. Δεν αντικατέστησαν απλώς τις μεταβλητές του Sass, τις ξεπέρασαν. Οι τιμές τους ζουν στο cascade κατά το runtime: αλλάζουν ανά component ή media query, ακόμη και από JavaScript, και κληρονομούνται όπως κάθε άλλη ιδιότητα.
  • Cascade layers και @scope. Το @layer ορίζει ρητά ποιο στρώμα κανόνων (reset, βιβλιοθήκες, components, utilities) υπερισχύει, ανεξάρτητα από το specificity των selectors. Το @scope περιορίζει τα styles σε ένα τμήμα του DOM. Μαζί λύνουν όσα παλιότερα αντιμετωπίζαμε με naming conventions και !important.
  • Χρώματα. Η color-mix() και η relative color syntax καλύπτουν όσα κάναμε με τα darken() και lighten() του Sass. Και δουλεύουν και πάνω σε custom properties.

Όσα δεν μπορεί να κάνει ένας compiler

Ένας preprocessor τρέχει πριν φτάσει ο κώδικας στον browser. Δεν ξέρει τίποτα για το layout, το viewport ή το τι κάνει ο χρήστης. Η σύγχρονη CSS δουλεύει ακριβώς εκεί, στο runtime:

  • Typed custom properties με @property. Ορίζετε τύπο, αρχική τιμή και κληρονομικότητα. Έτσι ο browser μπορεί να κάνει animate τιμές, όπως μια γωνία ή ένα χρώμα σε gradient, που πριν τις αντιμετώπιζε ως απλό κείμενο.
  • Scroll-driven animations. Με το animation-timeline και τις συναρτήσεις scroll() και view(), ένα animation συνδέεται με την πρόοδο του scroll ή με την ορατότητα ενός στοιχείου. Χωρίς scroll listeners σε JavaScript. Με το Firefox 159 τον Οκτώβριο του 2026, έγιναν πλέον Baseline Newly available.
  • View Transitions. Animated μεταβάσεις μεταξύ σελίδων ή καταστάσεων. Σε multi-page sites αρκεί ο κανόνας @view-transition, ενώ σε SPA η μετάβαση ξεκινά με μία κλήση στο document.startViewTransition().
  • Anchor positioning. Tooltips, popovers και dropdowns «δένονται» σε ένα στοιχείο-στόχο και αλλάζουν πλευρά όταν δεν χωρούν. Χωρίς υπολογισμούς σε JavaScript ή βιβλιοθήκες τύπου Floating UI. Ο πυρήνας του έγινε Baseline τον Ιανουάριο του 2026 με το Firefox 147, ενώ κάποιες νεότερες ιδιότητές του ωριμάζουν ακόμη.
  • :has() και container queries. Styles που εξαρτώνται από το περιεχόμενο ενός στοιχείου ή από το μέγεθος του container του, όχι μόνο από το viewport. Το επόμενο βήμα είναι η συνάρτηση if(), που προς το παρόν υποστηρίζεται μόνο στο Chrome.

Πού έχει ακόμη νόημα το Sass

Το Sass δεν πέθανε, απλώς δεν είναι πια αυτονόητη υποδομή. Έχει νόημα όταν:

  • Δουλεύετε με BEM. Το native nesting δεν ενώνει selectors όπως το &__element ή το &--modifier. Αν η ομάδα σας βασίζεται σε αυτό το μοτίβο, το Sass γλιτώνει πολλή επανάληψη.
  • Θέλετε μεταβλητές στα breakpoints. Οι custom properties δεν μπαίνουν σε συνθήκες @media, οπότε τα breakpoints ως μεταβλητές Sass παραμένουν πρακτική λύση.
  • Παράγετε μεγάλα σύνολα classes. Loops και maps για utility classes, spacing scales ή themes είναι δουλειά του build time.
  • Συντηρείτε υπάρχον codebase. Ένα ώριμο design system με βιβλιοθήκες mixins δεν αξίζει να ξαναγραφτεί μόνο για αρχή.

Στις υπόλοιπες περιπτώσεις, ένας preprocessor προσθέτει κυρίως dependencies, κόστος αναβαθμίσεων και χρόνο στο build. Ενδεικτικά, το Sass έχει ήδη κηρύξει deprecated το @import, κάτι που σημαίνει migration για πολλά παλιότερα projects.

Χωρίς Sass δεν σημαίνει χωρίς build

Αν αφαιρέσετε τον preprocessor, η CSS δεν πηγαίνει απαραίτητα στον browser όπως γράφτηκε. Minification, bundling και fallbacks για παλιότερους browsers εξακολουθούν να χρειάζονται, με εργαλεία όπως το Lightning CSS ή το PostCSS. Η διαφορά είναι ότι δουλεύουν πάνω σε κανονική CSS: ο κώδικας που γράφετε είναι ο κώδικας που καταλαβαίνει ο browser.

Και μια πρακτική σημείωση: «Baseline Newly available» σημαίνει ότι ένα feature τρέχει στις τελευταίες εκδόσεις όλων των browsers. Για τα πιο πρόσφατα, ελέγξτε το κοινό σας και χρησιμοποιήστε @supports ως progressive enhancement.

Το συμπέρασμα

Τα εργαλεία υπάρχουν για να καλύπτουν τα κενά της πλατφόρμας, μέχρι να τα καλύψει η ίδια. Η CSS όχι μόνο τα κάλυψε, αλλά μετέφερε το παιχνίδι στο runtime.

Πριν προσθέσετε ένα ακόμη εργαλείο από συνήθεια, ελέγξτε στο MDN και στο Web Platform Status τι υποστηρίζει ήδη ο browser. Με native CSS το dependency tree μένει ελαφρύ, τα builds γίνονται πιο γρήγορα και ο κώδικας μένει κοντά στην πλατφόρμα. Εκτός αν ένα project έχει πρόβλημα που λύνεται μόνο με compiler, η native CSS είναι σήμερα η καλύτερη αφετηρία.