SCSS - !default

Schreibt man scss-Bibliotheken oder wiederverwendbare Snippets, will man üblicherweise die Möglichkeit geben, Variablen zu ändern, um z.B. die Farbgebung zu beeinflussen.

Importiert man andere Dateien und überschreibt danach die Variablen auf herkömmlichen Wege, hat diese keine Auswirkung:

_library.scss

// _library.scss
$color: #000;

body {
  background-color: $color;
}

style.scss

// style.scss
@import 'library';

$color: #222;

css

body {
  background-color: #000;
}

Die in _library.scss definierten Styles werden von dem nachträglichen Überschreiben der Variable nicht beeinflusst, stattdessen wird der in _library.scss gesetzte Wert genutzt.

Der @import entspricht einem kopieren des Dateiinhalts an die entsprechende Stelle, und führt nicht zu einer gesonderten Behandlung der importierten Dateien. Die eigentlich übersetzte Datei entspricht also folgendem Code:

// style.scss
$color: #000;

body {
  background-color: $color;
}

$color: #222;

Das Überschreiben der Variable passiert also erst nach dem Nutzen dieser, und ist deshalb wirkungslos. Eine Lösung dafür wäre das Aufteilen des Library-Codes in zwei Teile - die Variablendefinitionen und den restlichen Code. Beide könnten dann unabhängig voneinander importiert, und Variablen überschrieben werden:

style.scss

// style.scss
@import 'library-variables';

$color: #222;
@import 'library';

Dies käme aber nicht ohne Nachteile; der Code ist aufgeteilt auf mehrere Dateien, hängen Variablen voneinander ab, müsste man diese auf noch mehr Dateien aufteilen, und der Nutzer muss immer auf das korrekte Importieren achten.

Als sinnvolle Lösung bietet scss dafür default-Variablen.

!default

Mit !default makierte Variablen werden nur dann ausgewertet, wenn sie nicht bereits definiert sind. Dies ermöglicht es, in der Library genutzte Variablen zu definieren, bevor man diese einbindet. Die default-Werte innerhalb der Library überschreiben die bereits definierten Variablen nicht.

_library.scss

//_library.scss
$color: #000;

body {
  background-color: $color;
}

style.scss

// style.scss
$color: #222;

@import 'library';

css

body {
  background-color: #222;
}

Definiert man die Variable nicht selbst, greift der default-Wert:

style.scss

// style.scss
@import 'library';

css

body {
  background-color: #000;
}