Styleguide Element überschreiben

Ein Styleguide hat die Möglichkeit Elemente anderen Styleguides zu überschreiben. Wichtig ist, dass der überschreibende Styleguide die zu überschreibenden Styleguides required.

Beispiel - framework-paragraph

Der framework-paragraph soll beisielhaft von dem cms-styleguide angepasst werden.

Ordnerstruktur

• framework-styleguide
  • element
    • framework-pargraph
      • _default.scss
      • _layout.scss
      • framework-paragraph.hbs
      • FrameworkParagraph.php
      • framework-pargraph.config.js
• shop-styleguide
  • element
    • framework-paragraph
      • _default.scss - Falls Element

Überschreibungsmöglichkeiten

shop-styleguide/.../_layout.scss

Wenn diese Datei angelegt ist, wird die der Inhalt der _layout.scss aus dem zu überschreibenden Element ersetzt.

Allerdings gibt es die Möglichkeit den Inhalt des zu überschreibenden Elements zu importieren und dann weiter anzupassen.

@import "../../../framework-styleguide/element/framework-paragraph/layout";

// Erweitern der Standardvariante
.framework-pargraph--standard {
	color: $framework-paragraph-variant-standard-color-special;
}

// Erstellen einer eigenen Variante
.framework-paragraph--error {
	color: $framework-paragraph-variant-standard-color-error;
	background: $framework-paragraph-variant-standard-background-error;
}