...
shop-styleguide/.../_overwrite.scss
Mit dieser Datei ist es möglich, die Variablen aus der _default.scss des zu überschreibenden Elementes zu überschreiben. Das ist der einfachste Weg ein Element anzupassen.
| Codeblock | ||||
|---|---|---|---|---|
| ||||
$framework-paragraph-variant-standard-color: pink; $framework-paragraph-variant-standard-font-size: 2em; |
...
| Codeblock | ||||
|---|---|---|---|---|
| ||||
@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;
} |
shop-styleguide/.../_default.scss
Wenn diese Datei angelegt ist, wird der Inhalt der _default.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.
| Codeblock | ||||
|---|---|---|---|---|
| ||||
@import "../../../framework-styleguide/element/framework-paragraph/default";
$framework-paragraph-variant-standard-color-special: pink;
$framework-paragraph-variant-standard-background-error: red; |