Automatisierte Erstellung einer Sass-Struktur für Media Queries mit einem Bash-Skript

August 30, 2014

Eine gut organisierte Projektstruktur ist entscheidend für die Wartbarkeit von CSS, insbesondere bei der Verwaltung von responsiven Designs. Anstatt alle Media Queries in einer einzigen Datei zu verwalten, ist es eine bewährte Methode, sie in separate, thematische Dateien aufzuteilen.

Dieses Dokument zeigt, wie ein einfaches Bash-Skript diesen Prozess automatisieren kann, indem es eine modulare Sass-Struktur für Media Queries erstellt.

Zielstruktur

Das Ziel ist die folgende Verzeichnis- und Dateistruktur:

code

.
├── abstracts/
│   └── _breakpoints.scss
├── components/
│   └── _buttons.scss
└── main.scss

abstracts/_breakpoints.scss: Definiert die Breakpoints als Sass-Map und ein Mixin zur einfachen Verwendung.
components/_buttons.scss: Eine Beispiel-Komponentendatei, die das Breakpoint-Mixin verwendet.
main.scss: Die Hauptdatei, die alle anderen Teile importiert.

Das Bash-Skript zur Strukturerstellung

Das folgende Skript generiert die Verzeichnisse und die grundlegenden Sass-Dateien.

code

#!/usr/bin/env bash
set -e

echo "Erstelle Sass-Verzeichnisstruktur..."

# Verzeichnisse anlegen
mkdir -p abstracts components

# Breakpoint-Definitionen und Mixin erstellen
cat <<'EOF' > abstracts/_breakpoints.scss
// Breakpoints als Map definieren
$breakpoints: (
  "mobile": 480px,
  "tablet": 768px,
  "desktop": 1024px,
  "wide": 1440px
);

// Mixin zur einfachen Verwendung der Breakpoints
@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: #{map-get($breakpoints, $breakpoint)}) {
      @content;
    }
  } @else {
    @warn "Breakpoint '#{$breakpoint}' nicht gefunden.";
  }
}
EOF

# Beispiel-Komponentendatei erstellen
cat <<'EOF' > components/_buttons.scss
@use "../abstracts/breakpoints" as *;

.button {
  padding: 10px 15px;
  background-color: blue;
  color: white;

  // Stile für größere Bildschirme anwenden
  @include respond-to("tablet") {
    padding: 15px 25px;
    font-size: 1.2rem;
  }
}
EOF

# Haupt-Sass-Datei erstellen
cat <<'EOF' > main.scss
// Moderne @use-Regel zum Importieren von Modulen
@use "abstracts/breakpoints";
@use "components/buttons";

// Globale Stile
body {
  font-family: sans-serif;
}
EOF

echo "Struktur erfolgreich erstellt."

Ausführung des Skripts

Speichern Sie das obige Skript als setup_sass.sh.
Machen Sie es ausführbar:
code
```
chmod +x setup_sass.sh
```
Führen Sie es aus:
code
```
./setup_sass.sh
```

Sass kompilieren

Um die .scss-Dateien in eine einzige CSS-Datei zu kompilieren, verwenden Sie den Sass-Compiler.

Einmalige Kompilierung:

code

# Kompiliert main.scss zu main.css
sass main.scss main.css

Änderungen beobachten (Watch-Modus): Dieser Befehl überwacht die Dateien auf Änderungen und kompiliert sie automatisch neu.

code

sass --watch main.scss:main.css

Fazit

Die Automatisierung der initialen Projektstruktur mit einem einfachen Bash-Skript spart Zeit und stellt sicher, dass Projekte konsistent und nach bewährten Methoden aufgebaut sind. Die hier gezeigte Struktur mit einem zentralen Breakpoint-Mixin ist skalierbar und erleichtert die Verwaltung von responsiven Stilen erheblich.