Cinq fonctionnalités Sass que vous pouvez remplacer par du CSS

Si vous utilisez Sass depuis des années, vous en connaissez déjà la valeur : variables, imbrication, fonctions de couleur et une manière plus propre d’organiser les feuilles de style. Mais le CSS moderne a discrètement comblé son retard. Plusieurs fonctionnalités qui nécessitaient autrefois un préprocesseur et une étape de build sont désormais natives, bien prises en charge et prêtes pour la production.

Il ne s’agit pas de plaider pour l’abandon total de Sass. Il reste imbattable pour la logique au moment de la compilation, les boucles, les maps et les fonctions complexes. Mais si vous maintenez une dépendance à Sass principalement pour les cinq fonctionnalités ci-dessous, le CSS natif peut probablement prendre le relais.

1. Les propriétés personnalisées CSS remplacent les variables Sass

Sass :

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

CSS natif :

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

Les propriétés personnalisées CSS sont largement prises en charge dans les navigateurs modernes et offrent quelque chose que les variables Sass ne peuvent pas faire : elles sont résolues à l’exécution, et non à la compilation. Cela signifie que vous pouvez les mettre à jour avec JavaScript, les limiter à un composant ou les surcharger dans une media query. Pour la gestion des thèmes et les interfaces dynamiques, elles sont plus performantes que les $variables.

Le compromis : les variables Sass restent utiles lorsque vous avez besoin qu’une valeur n’existe qu’au moment du build, ou lorsque vous alimentez des boucles et des conditions que CSS ne peut pas exprimer nativement.

2. L’imbrication CSS native remplace l’imbrication Sass

Sass :

.card {
  padding: 1rem;
  &:hover { background: #f5f5f5; }
  .card__title { font-size: 1.25rem; }
}

CSS natif :

.card {
  padding: 1rem;
  &:hover { background: #f5f5f5; }
  & .card__title { font-size: 1.25rem; }
}

L’imbrication CSS est désormais largement prise en charge sur les navigateurs modernes. La syntaxe est presque identique à celle de Sass, bien qu’il soit recommandé de préfixer les sélecteurs de type ou de classe imbriqués avec & pour plus de clarté. L’imbrication native est analysée par le navigateur et utilise en interne un comportement de spécificité de type :is(), elle n’est donc pas un clone parfait de Sass, mais pour la plupart des styles au niveau des composants, les différences sont mineures. Si vous n’utilisez Sass que pour l’imbrication, c’est la fonctionnalité la plus facile à remplacer.

3. color-mix() remplace les fonctions de couleur de Sass

Sass :

$primary: #3498db;
.button { background: darken($primary, 10%); }

CSS natif :

:root { --primary: #3498db; }
.button { background: color-mix(in srgb, var(--primary) 80%, black); }

color-mix() est largement pris en charge dans les navigateurs actuels et permet de dériver des variantes plus claires, plus sombres et mélangées à partir d’une seule couleur de base. Ce n’est pas un remplacement direct un pour un de darken() ou lighten() — ces dernières ajustent la luminosité dans l’espace HSL, tandis que color-mix() mélange deux couleurs — mais pour la plupart des cas d’usage pratiques dans un design system, elle couvre le même terrain. Pour une parité plus proche des ajustements basés sur HSL, vous pouvez mélanger dans l’espace de couleurs hsl : color-mix(in hsl, var(--primary), black 10%).

4. @layer remplace les contournements de spécificité

Les développeurs Sass écrivent souvent des structures de sélecteurs complexes pour gérer la spécificité. La règle CSS @layer est désormais largement prise en charge dans les navigateurs modernes et vous donne un contrôle explicite sur l’ordre de la cascade sans astuces de spécificité :

@layer base, components, utilities;

@layer base { a { color: blue; } }
@layer utilities { .text-red { color: red; } }

Les utilitaires l’emportent toujours sur les styles de base — non pas en raison du poids du sélecteur, mais grâce à l’ordre des couches. C’est une solution plus propre que tout ce que Sass pourrait offrir pour la gestion de la cascade.

5. @property remplace les contournements pour variables typées

@property est désormais pris en charge dans les navigateurs modernes actuels et permet d’enregistrer des propriétés personnalisées avec un type, une valeur initiale et un comportement d’héritage :

@property --hue {
  syntax: '<number>';
  initial-value: 220;
  inherits: false;
}

Cela permet d’animer les propriétés personnalisées et empêche les héritages inattendus — ce que les propriétés personnalisées CSS classiques ne peuvent pas faire seules. La prise en charge par les navigateurs est plus récente que pour les autres fonctionnalités de cet article, vérifiez donc vos navigateurs cibles avant de vous en remettre fortement à elle en production.

Ce que Sass fait toujours mieux

Le CSS natif n’a pas d’équivalent pour @each, @for, @if ou la logique complexe de @function. Si votre Sass génère des classes utilitaires, construit des échelles d’espacement de manière programmatique ou contient une sortie conditionnelle, conservez Sass. Notez également que @import de Sass est obsolète — utilisez à la place le système de modules @use et @forward.

Conclusion

Pour les variables, l’imbrication, la manipulation des couleurs, le contrôle de la cascade et les propriétés typées, le CSS moderne est désormais suffisant pour de nombreuses tâches de stylisation quotidiennes. Auditez ce pour quoi vous utilisez réellement Sass. Vous découvrirez peut-être que l’étape de build résout moins de problèmes qu’auparavant. Sass mérite toujours sa place pour la logique programmatique, mais pour les préoccupations de stylisation quotidiennes, le CSS natif a comblé l’écart.

FAQ

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..