Passer de Sass à Vanilla CSS

Les CSS ont énormément évoluées ces dernières années et intègre en natif et avec un large support beaucoup de fonctionnalité Sass. Outre, la suppression à une dépendance pour la compilation, l'utilisation des standards natifs offre une meilleure maintenabilité pour le futur. Quelques éléments de base pour effectuer la transition de Sass vers Vanilla CSS en douceur !

Les Variables

Déjà largement utilisées, les variables sont aisément implémentables, même s'il ne faut pas en abuser. Car, là où Sass remplace les variables par leurs valeurs respectives, ce n'est pas le cas en CSS.

Les variables en Sass

$color-green: #25653B;
$a11y-lineheight: 2.55rem;

main p {
	font-color: $color-green;
	line-height: $a11y-lineheight; 
}

Les variables en CSS

:root {
	--color-green: #25653B;
	--a11y-lineheight: 2.55rem;
}

main p {
	font-color: var(--color-green);
	line-height: var(--a11y-lineheight); 
}

Imbrication ou Nesting

C'est une fonctionnalité extrêmement intéressante et puissante de Sass qui évite des répétitions et une certaine lourdeur du code. Et, bonne nouvelle, cette fonctionnalité est déjà très largement supportée en CSS (plus de 90%).

Imbrication en Sass

.card {
    border: 1px solid #ddd;
	a {
		color: firebrick; 
		&:hover {color: steelblue;}
	}
	p:last-child {margin-bottom: 1em;}
}

Imbrication en CSS

Note : pour l'utilisation du sélecteur "&", vous pouvez vous référer à l'article Imbrication CSS.

.card {
    border: 1px solid #ddd;
	& a {
		color: firebrick; 
		&:hover {color: steelblue;}
	}
	& p:last-child {margin-bottom: 1em;}
}

Les mixins

@mixin couplé à @include permet de définir un style de base réutilisable. Mais le code va être systématiquement réinjecté, ce qui alourdit la feuille de style.

En Sass

@mixin card {
	border: 1px solid #ddd;
	a {
		color: firebrick; 
		&:hover {color: steelblue;}
	}
	p:last-child {margin-bottom: 1em;}
}

.card--home {
  @include card;
  background-color: aliceblue;
}

/* Avec variable */
@mixin card($bg: azure) {
	border: 1px solid #ddd;
	background-color: $bg;
	a {
		color: firebrick; 
		&:hover {color: steelblue;}
	}
	p:last-child {margin-bottom: 1em;}
}

.card--home {
	@include card(aliceblue);
}

En CSS

En utilisant la technique BEM et un sélecteur d'attribut, on arrive au même résultat. Avec, en bonus, un résultat plus léger, le code du bloc n'ayant pas besoin d'être systématiquement réinjecté.

[class^="card"] {	
	border: 1px solid #ddd;
	& a {
		color: firebrick; 
		&:hover {color: steelblue;}
	}
	& p:last-child {margin-bottom: 1em;}
}
.card--home {
	background-color: aliceblue;
}

/* En reprenant l'idée de la variable */
:root {
	--color-bg-card: azure; /* Couleur de base */
}
[class^="card"] {	
	border: 1px solid #ddd;
	background-color: var(--color-bg-card);
	& a {
		color: firebrick; 
		&:hover {color: steelblue;}
	}
	& p:last-child {margin-bottom: 1em;}
}
.card--home {
	--color-bg-card: hotpink; /* Couleur de remplacement */
}

La règle @import

La fonction @import qui permet d'inclure des fichiers est supportée en CSS depuis bien longtemps. Mais, là où Sass importe et compile le contenu des fichiers, ce n'est pas le cas en CSS. Ce qui a pour conséquence d'augmenter le nombre de requêtes auprès du serveur (1 @import = 1 requête). Pourtant, il existe une astuce : lors de la minification, il est possible d'intégrer le contenu des fichiers importés, notamment en utilisant postcss-import (généralement inclut dans les outils de minification) avec un fonctionnement identique à celui de Sass.

Exemple en CSS

/* ==Core */
@import "folder/variables.css";
@import "folder/reset.css"; 

/* ==Utilities & Components */
@import "folder/helpers.css";
@import "folder/skip.css";

Les pseudo-classes :is et :has

Ces pseudo-classes permettent de cibler précisément des éléments et de simplifier l'écriture : fort utile à bien des égards. Le support complet de :is et :has n'est que très récent (Baseline 2023) !

Exemples en CSS

/* Sans les pseudo-classes */
.card h2, 
.card cite {
	background-color: steelblue;
}
/* Avec les pseudo-classes */
.card :is(h2, cite) {
	background-color: steelblue;
}

On cible tous les paragraphes, enfants de la classe .card, qui contiennent la balise cite.

.card p:has(cite) {
	background-color: steelblue;
}

Conclusion

Avec une approche méthodique et une planification soigneuse, le passage de Sass à Vanilla CSS peut être réalisé de manière efficace. Sur des projets extrêmement complexes nécessitant des fonctions spécifiques ou des boucles, cela peut être un peu plus long, car il n'y a pas encore d'équivalent en pur CSS, il faudra, pour cela, réintégrer le code compilé.