SASS: Doppelten Inhalt beim @import vermeiden

Arbeitet man in einem größeren Projekt mit Partial-Dateien, so kann es passieren, dass dieselbe Part-Datei an mehreren Stellen eingebunden wird. Das ist ärgerlich, denn so wächst die generierte CSS-Datei unnötig. Ich gehe in diesem Artikel auf einen möglichen Lösungsansatz ein, der ein mehrfaches generieren von Code unterbinden.

Es ist eigentlich recht simpel. Ich setze am Anfang jeder Partial-Datei eine Variable und prüfe dann – während der Generierung – auf den Wert der Variable.

/* partial/_checkout.scss */
$checkout-generated: false !default;

@if not $checkout-generated {
	$checkout-generated: true;

	.steps {
		display: flex;
		/* und so weiter */
	}
}

/* partial/_last-step.scss */
@import "partial/_checkout";

/* main.scss */
@import "partial/_checkout";

Das Beispiel zeigt, wie aus Versehen in den Dateien _last-step.scss und main.scss die gleiche Datei importiert wurde. Das ist nicht schlimm, denn als wir beim ersten Mal die Datei partial/_checkout.scss aufgerufen haben, stand der Wert der Variable $checkout-generated auf false. Als wir dann in den @if-Block liefen, setzten wir die Variable auf true. Als wir dann ein zweites Mal die Datei aufriefen, ignorieren wir die Variablendeklaration (siehe !default) und liefen weiter zum If-Block. Da die Variable nun auf true stand, fuhr der SASS-Compiler einfach fort.

Warnung ausgeben

Natürlich kann man jetzt noch den If-Block durch eine Warnung erweitern. So wird der Entwickler sofort benachrichtigt, sollte er eine Partial-Datei mehrfach eingebunden haben:

/* partial/_checkout.scss */
@if not $checkout-generated {
	$checkout-generated: true;
	
	/* ... */
} @else {
	@warn "File partial/_checkout has already been included";
}