Der Kopfbereich der Beispiel-SCSS-Datei umfasst folgende Abschnitte:

• Auswahleigenschaften: Enthält eine Zusammenstellung von Variablen für wählbare Farben und anderene relevante Merkmale, z.B. $memtext-blaugrau:#ECF0F3;

• SX-Default: Umfasst SuperX-Merkmale mit ihren in SuperX üblichen Standard-Ausprägungen, und zwar
  • als Einzel-Merkmalsvariablen, z.B. $input-container-background: $memtext-blaugrau;
  • oder als Mixins = Style-Blöcke, in denen mehrere Merkmale für ausgewählte HTML-Klassen zusammengefasst sind.

Beispiel-Style-Block für Button mit weißem Hintergrund und abgerundetem Rahmen

@mixin default-button-dialogue {
background-color: white;
border-radius: 0.3em;
}

Ergebnis:

 

• Hochschul-Spezifika: Hier können Sie den Superx-Merkmalen (analog zum SX-Default) HS-spezifische Ausprägungen gem. Corporate Design zuordnen, und zwar
  • als Einzel-Merkmalsvariablen, z.B. $input-container-background:#d9d9d9ff;
  • oder als Mixin

Beispiel-Style-Block für Button mit grauem Hintergrund und eckigem Rahmen 

@mixin hochschul-button-dialogue {
background-color: #d9d9d9;
}

Ergebnis: