Importieren von Dateien in SASS

Bei der Arbeit mit SASS-Dateien kann es notwendig sein, Code aus einem Dokument .scss zu übernehmen, aber ohne einen Klon davon mit der Erweiterung .css zu erstellen, d.h. einen Fragment davon zu importieren.

Zum Beispiel haben wir die Datei navbar.scss mit folgendem Code:

navbar.scss.active {
  color: red;
}

Um diese Art von Import durchzuführen, muss zunächst ein Unterstrich vor dem Dateinamen hinzugefügt werden, so: _navbar.scss. Dann schreiben wir in eine andere Datei style.scss die Direktive @import, aber im Namen der zu importierenden Datei werden der Unterstrich und die Dateierweiterung nicht angegeben:

style.scss@import "navbar";

Und wir sehen, dass bei der Kompilierung in style.css der Code aus der Datei _navbar.scss importiert wurde:

style.css.active {
  color: red; 
}

main.scss.block-content {
  padding: 10px;
  margin-left: auto;
  width: 600px;
  font-size: 14px;
}