Generelle Dateistruktur

  • default.scss: importiert alle benötigten Dateien aus dem Projektordner + die Nutshell-Dateien aus dem generic-Ordner. Nicht benötigte Dateien sollten auskommentiert werden, um die generierte CSS-Datei möglichst klein zu halten.
  • jede andere SCSS-Datei: enthält im Kopf eine Liste aller verwendeten und angepassten Variablen und importiert ihr Pendant aus der Nutshell.

Beispiel: Kopfbereich der _accordion.scss

// *
// * Erdmann & Freunde - Nutshell
// * Starterkit
// * erdmann-freunde.de/nutshell/
// *
// * Lizenziert unter MIT OPEN SOURCE
// *

//
// COMPONENTS/ACCORDION
// --------------------------------------------------

// PUT YOUR SASS-VARIABLES HERE

// --------------------------------------------------

@import "../../../../nutshell/scss/components/accordion";

// --------------------------------------------------

// PUT YOUR CUSTOM-PROPERTIES HERE

// --------------------------------------------------

// PUT YOUR STYLES HERE

Seit Version 1.0 verwenden wir sowohl Custom Properties (aka CSS Variablen) als auch SCSS-Variablen. AChte auf die korrekte Reihenfolge, um sicherzustellen, dass die Varaiblen (nicht) überschrieben werden.