Mit CSS kann man, spätestens ab Version 3, schon ziemlich viel anstellen. Noch mehr bieten sogenannten CSS-Präprozessoren wie Sass oder Less. Die ermöglichen es beispielsweise, Stylesheets zu verschachteln, zu vererben oder zu importieren. Dieser Code wird dann in “klassisches” CSS übersetzt. Beim @importieren in Sass kündigt sich jedoch eine Änderung an.
Wer ab Dart Sass 1.80.0 mit @import arbeitet, erhält einen Hinweis, dass diese Funktion ab Version 3.0.0 nicht mehr unterstützt wird. Bis dahin geht zwar noch einige Zeit ins Land, aktuell sind wir wie gesagt noch vor Version 2.0.0. Das Modulsystem mit @use und @forward, das das pauschale @import ersetzen soll, bietet jedoch einige Vorteile, die schon heute einen näheren Blick lohnen.
In Sass dient @import dazu, Stylesheets aus anderen Dateien zu importieren. Damit kann man den Code besser organisieren, beispielsweise wenn mehrere Entwickler parallel an unterschiedlichen Teilen arbeiten.
// main.scss
@import 'colors';
@import 'sizes';
body {
background-color: $bg-color;
font-size: $main-font-size;
}
// Partial _colors.scss
$bg-color: #FFFFFF;
// Partials _sizes.scss
$main-font-size: 16pt;
Soweit so gut, was ist jetzt das Problem damit? Mit @import werden Styleshees pauschal in den globalen Namensraum eingefügt. Das führt zu Problemen, wenn zwei Partials denselben Bezeichner verwenden. Das kann zum Beispiel passieren, wenn man verschiedene Komponenten in getrennte Partials packt:
// _list.scss
$bg-color: #FCFCFC;
// _cta-button.scss
$bg-color: skyblue;
Importiert man diese beiden Partials, welchen Wert hat dann $bg-color? Es bleibt dem Entwicklerteam überlassen, für Klarheit zu sorgen, beispielsweise durch passende Prefixe: $list-bg-color und $cta-bg-color.
Verwendet man dagegen das Modulsystem mit @use, werden die unterschiedlichen Partials automatisch in getrennte Namensräume eingefügt:
// main.scss
@use 'list';
@use 'cta-button';
In diesem main.scss stehen jetzt die Variablen list.$bg-color und cta-button.$bg-color zur Verfügung.
Außerdem wird das klassische @import gewissermaßen fortgesetzt. Das soll heißen, wird eine Sass-Datei, die eine andere mit @import einbindet, wiederum selbst @importiert, wird auch das Importierte mit importiert:
// main.scss
@import 'bootstrap'
// $bg-color wird aus colors über bootstrap importiert
// _bootstrap.scss
@import 'colors'
@import 'sizes'
...
// _colors.scss
$bg-color: #FDFDFD;
Das kann schnell unübersichtlich werden, wenn alles überall landet. Wird dadurch ein Partial mehrfach importiert, wird es auch mehrfach ausgewertet, was zusätzlich zu Performanceproblemen führen kann.
Dieses Problem soll zukünftig ein anderer Teil des Modulsystems lösen, nämlich @forward. Damit kann man den Inhalt eines Partials gewissermaßen an eine dritte Stelle “durchreichen”, ohne dass sie im Modul selbst geladen wird:
// main.scss
@use 'bootstrap';
// die Variable bootstrap.$bg-color ist verfügbar
// _bootstrap.scss
@forward 'colors';
// die Variable colors.$bg-color ist hier NICHT verfügbar
// _colors.scss
$bg-color: #F0F0F0;
Das Modulsystem in Sass bietet noch mehr, beispielsweise kann man den Bezeichner des gewünschten Namensraums festlegen. Genauere Informationen gibt es in der Dokumentation für @use und @forward. Dieser Blogbeitrag soll einen kleinen Einblick bieten, gewissermaßen als Motivation, beim nächsten Projekt direkt mit @use und @forward zu arbeiten. Dann erspart man es sich nämlich auch, wenn Dart Sass 3.0.0 vor der Tür steht, die ganzen @importe im bestehenden Code umzubauen.
