Sie haben es sicher schon gesehen, dass es bei SASS (scss) manche Style-Scripte mit einem Unterstrich im Dateinamen beginnen, andere wiederum nicht. Bei der Import-Einbindung dieser Scripte aber scheint die Schreibweise egal. Was hat das damit aussich?

 

Der Sinn der Underscore-Syntax

...ist, daß hierüber dem SASS-Compiler mitgeteilt werden kann, ob man eine importierte Scriptdatei wirklich mit ihrem Inhalt in eine aufrufende Scriptdatei einbetten will, es also am Ende nur eine einzige Scriptdatei entsteht in der alle so importierten Unterscripte mit ihrem Inhalt enthalten sind. Ohne Unterstrich demgegenüber sagt man jedoch dem Compiler, dass diese so importierte scss-Datei als eine eigenständige css-Datei compiliert erhalten bleibt und klassisch per @import in der fertigen css-Hauptscript aufgerufen wird. D.h., in diesem Fall entstehen ggf. nicht eine einzige CSS-Datei, sondern sehr viele einzelne.

 

Warum gibt es diese Möglichkeit der Unterstrich-Steuerung?

Für die Entwicklung von Projekten ist es sehr elegant und zweckmäßig auch CSS-Scripte modular zu managen. Das erleichtert z.B. die Wiederverwendbarkeit von Scriptbestandteile zwischen Projekten abhängig vom Bedarf. Wenn Sie z.B. eine Contentmodul einbinden, welches den Content z.B. in Blöcken formatiert, dann brauchen Sie dafür einen Set an Style-Classen. Dieses vollständige Set legen Sie in einer separaten scss-Datei ab und binden diese Script per @import ein. Allerdings würden Sie so eine Unmenge an CSS-Scripten erhalten und in den HTML-Header einbinden. Das widerspricht natürlich gravierend dem prinzipiellen Trend, möglichst wenige Scripte in ein HTML-Dokument einzubinden, um die Anzahl der Serverrequests drastisch zu reduzieren, was z.B. u.a. für das Suchmaschinenranking relevant ist und Seitenaufrufen für den Nutzer beschleunigt. Deshalb ist verständlicherweise die Unterstrich-Variante auch die Standardform, weil Sie vorteilhaft wenige Dateien erzeugt.

Aber, mitunter kann es Gründe geben separate CSS-Dateien zu erzeugen, z.B., um in der Entwicklungszeit eines Projektes einzelne Scripte besser debuggen zu können. Für diesen beabsichtigen Fall müssten die Script-Dateinamen ohne Unterstrich beginnen.

 

Einige Regeln die dabei beachtet werden sollten

Es ist egal wie das Import-Script per @import geladen wird. Folgende Schreibweisen binden exakt die selbe Datei ein.

@import "partialsassfile"
@import "partialsassfile.scss"
@import "_partialsassfile"
@import "_partialsassfile.scss"

Aber es sollten keine zwei Dateien im Suchverzeichnis liegen, die die gleiche Namensbasis haben. Gibt es also sowohl eine path/_partialsassfile.scss und eine path/partialsassfile.scss, dann wird das zumindest eine Warnung erzeugen.

Noch gravierender ist es, wenn für die gleiche Namensbasis equivalente Dateierweiterung wie *.sass oder *.scss existieren, dann erzeugt SASS nämlich einen Fehler/Error (Bsp. partialsassfile.scss und _partialsassfile.scss).

Wenn man z.B. partialsassfile.scss importiert, wird immer zuerst nach einer _partialsassfile.scss gesucht. Das ist also wie oben beschrieben der Standard, der zu bevorzugen ist.