Partials & Imports in SCSS

Was sind Partials in SCSS?

Partials sind SCSS-Dateien, die nur einen Teil des Stylesheets enthalten und in andere SCSS-Dateien importiert werden können. Sie helfen dabei, den Code in kleinere, überschaubare Teile zu gliedern.

Konventionen für Partials

SCSS-Partials beginnen mit einem Unterstrich (_), um dem Compiler mitzuteilen, dass diese Datei nicht direkt in eine CSS-Datei kompiliert werden soll.

Beispiel: Eine Partial-Datei für Variablen könnte _variables.scss heißen.

Imports in SCSS

Mit der @import-Direktive können Sie Partials in andere SCSS-Dateien einbinden. Im Gegensatz zu CSS-Imports werden SCSS-Imports während der Kompilierung zusammengeführt, was die Anzahl der HTTP-Anfragen reduziert.

Grundlegende Syntax


// Importieren einer Partial-Datei (ohne Unterstrich und Erweiterung)
@import "variables";
@import "mixins";
@import "reset";

// Mehrere Imports in einer Zeile
@import "variables", "mixins", "reset";

Hinweis: Beim Import müssen Sie weder den Unterstrich noch die Dateiendung angeben. SCSS sucht automatisch nach einer Datei mit dem Namen _filename.scss.

Vorteile von Partials und Imports

Modularität: Code in logische Einheiten aufteilen
Wiederverwendbarkeit: Gemeinsame Stile in verschiedenen Projekten nutzen
Wartbarkeit: Leichteres Finden und Aktualisieren von Code
Zusammenarbeit: Mehrere Entwickler können gleichzeitig an verschiedenen Dateien arbeiten
Organisation: Klare Struktur für große Projekte
Performance: Alle Imports werden zu einer CSS-Datei kompiliert, was die Ladezeit verbessert

Organisieren von SCSS-Dateien

Eine gängige Methode zur Organisation von SCSS-Dateien ist die 7-1-Architektur (7 Ordner, 1 Hauptdatei):


scss/
|
|– abstracts/ (oder utilities/)
|   |– _variables.scss    // Variablen
|   |– _functions.scss    // Funktionen
|   |– _mixins.scss       // Mixins
|   |– _placeholders.scss // Platzhalter
|
|– base/
|   |– _reset.scss        // Reset/Normalize
|   |– _typography.scss   // Typografie-Regeln
|   |– _animations.scss   // Animationen
|
|– components/
|   |– _buttons.scss      // Buttons
|   |– _carousel.scss     // Carousel
|   |– _dropdown.scss     // Dropdown
|
|– layout/
|   |– _navigation.scss   // Navigation
|   |– _grid.scss         // Grid-System
|   |– _header.scss       // Header
|   |– _footer.scss       // Footer
|   |– _sidebar.scss      // Sidebar
|   |– _forms.scss        // Formulare
|
|– pages/
|   |– _home.scss         // Startseite
|   |– _about.scss        // Über uns
|   |– _contact.scss      // Kontakt
|
|– themes/
|   |– _default.scss      // Standard-Theme
|   |– _dark.scss         // Dunkles Theme
|   |– _admin.scss        // Admin-Theme
|
|– vendors/
|   |– _bootstrap.scss    // Bootstrap
|   |– _jquery-ui.scss    // jQuery UI
|
`– main.scss              // Hauptdatei, die alle Partials importiert

Die Hauptdatei (main.scss)


// Abstracts
@import "abstracts/variables";
@import "abstracts/functions";
@import "abstracts/mixins";
@import "abstracts/placeholders";

// Vendors
@import "vendors/bootstrap";
@import "vendors/jquery-ui";

// Base
@import "base/reset";
@import "base/typography";
@import "base/animations";

// Layout
@import "layout/navigation";
@import "layout/grid";
@import "layout/header";
@import "layout/footer";
@import "layout/sidebar";
@import "layout/forms";

// Components
@import "components/buttons";
@import "components/carousel";
@import "components/dropdown";

// Pages
@import "pages/home";
@import "pages/about";
@import "pages/contact";

// Themes
@import "themes/default";
@import "themes/dark";

Globale vs. Lokale Imports

Globale Imports

In der Hauptdatei importierte Partials sind global verfügbar:


// main.scss
@import "abstracts/variables";
@import "abstracts/mixins";
// Weitere Imports...

Lokale Imports

Sie können auch Partials nur dort importieren, wo sie benötigt werden:


// components/_special-component.scss
@import "../abstracts/variables";
@import "../abstracts/mixins";

.special-component {
  // Komponenten-spezifische Stile
}

Tipp: Importieren Sie häufig verwendete Partials wie Variablen und Mixins global, um Redundanz zu vermeiden. Importieren Sie spezifische Partials lokal, wenn sie nur in bestimmten Komponenten benötigt werden.

Der Unterschied zwischen @import und @use (Sass-Modul-System)

In neueren Sass-Versionen (ab Sass 3.3) wurde die @use-Regel eingeführt, die @import langfristig ersetzen soll:

@import (traditionell)


// Alles wird in den globalen Namespace importiert
@import "variables";
@import "mixins";

.element {
  color: $primary-color; // Direkt verfügbar
  @include box-shadow(); // Direkt verfügbar
}

@use (modular)


// Namespaced Imports
@use "variables" as vars;
@use "mixins";

.element {
  color: vars.$primary-color; // Mit Namespace
  @include mixins.box-shadow(); // Mit Namespace
}

Vorteile von @use

Namespaces: Verhindert Namenskonflikte
Einmalige Imports: Jedes Modul wird nur einmal importiert, unabhängig davon, wie oft es mit @use referenziert wird
Privater Code: Mit _ oder - beginnende Mitglieder sind privat
Konfiguration: Module können mit with konfiguriert werden

Hinweis: @use ist in neueren Sass-Versionen verfügbar. Für ältere Projekte oder Kompatibilität mit älteren Sass-Versionen wird @import weiterhin unterstützt.

Praktisches Beispiel: Theming mit Partials

Struktur


scss/
|
|– abstracts/
|   |– _variables.scss    // Basis-Variablen
|
|– themes/
|   |– _light.scss        // Helles Theme
|   |– _dark.scss         // Dunkles Theme
|
|– components/
|   |– _button.scss       // Button-Komponente
|
`– main.scss              // Hauptdatei

Dateien

_variables.scss


// Basis-Variablen
$font-family-base: 'Roboto', sans-serif;
$font-size-base: 16px;
$border-radius: 4px;
$transition-base: all 0.3s ease;

// Theme-Variablen (Standardwerte)
$primary-color: #3498db !default;
$secondary-color: #2ecc71 !default;
$background-color: #ffffff !default;
$text-color: #333333 !default;
$border-color: #dddddd !default;

_light.scss


// Helles Theme
$primary-color: #3498db;
$secondary-color: #2ecc71;
$background-color: #ffffff;
$text-color: #333333;
$border-color: #dddddd;

_dark.scss


// Dunkles Theme
$primary-color: #3498db;
$secondary-color: #2ecc71;
$background-color: #222222;
$text-color: #f5f5f5;
$border-color: #444444;

_button.scss


// Button-Komponente
.btn {
  display: inline-block;
  padding: 10px 15px;
  background-color: $primary-color;
  color: white;
  border: none;
  border-radius: $border-radius;
  transition: $transition-base;
  
  &:hover {
    background-color: darken($primary-color, 10%);
  }
  
  &.btn-secondary {
    background-color: $secondary-color;
    
    &:hover {
      background-color: darken($secondary-color, 10%);
    }
  }
}

main.scss (für helles Theme)


// Importiere Basis-Variablen
@import "abstracts/variables";

// Importiere helles Theme (überschreibt Standardwerte)
@import "themes/light";

// Importiere Komponenten
@import "components/button";

// Basis-Stile
body {
  font-family: $font-family-base;
  font-size: $font-size-base;
  background-color: $background-color;
  color: $text-color;
}

dark-theme.scss (für dunkles Theme)


// Importiere Basis-Variablen
@import "abstracts/variables";

// Importiere dunkles Theme (überschreibt Standardwerte)
@import "themes/dark";

// Importiere Komponenten
@import "components/button";

// Basis-Stile
body {
  font-family: $font-family-base;
  font-size: $font-size-base;
  background-color: $background-color;
  color: $text-color;
}