From 93ded5d79b7c8dd015df42cac92f9e115469a7a2 Mon Sep 17 00:00:00 2001 From: borisv Date: Wed, 15 Dec 2021 04:58:55 +0100 Subject: [PATCH] New translation for German docs Guides/Styling & CSS, updated config.js (#2179) * Create styling.md First translation for German docs. * Update config.ts Activating link to German docs - Guides/Styling & CSS * Update styling.md Missing text link to de/ - fixed * Update docs/src/pages/de/guides/styling.md Adds missing comma Co-authored-by: Kim Schneider * Update docs/src/pages/de/guides/styling.md Spelling correction Co-authored-by: Kim Schneider * Update docs/src/pages/de/guides/styling.md Removes extra space Co-authored-by: Kim Schneider * Update docs/src/pages/de/guides/styling.md Removes superfluous comma Co-authored-by: Kim Schneider * Update docs/src/pages/de/guides/styling.md Phrases suggestion more friendly))) Co-authored-by: Kim Schneider Co-authored-by: Kim Schneider --- docs/src/config.ts | 3 +- docs/src/pages/de/guides/styling.md | 645 ++++++++++++++++++++++++++++ 2 files changed, 647 insertions(+), 1 deletion(-) create mode 100644 docs/src/pages/de/guides/styling.md diff --git a/docs/src/config.ts b/docs/src/config.ts index 4a8840ae5..2142fd0fc 100644 --- a/docs/src/config.ts +++ b/docs/src/config.ts @@ -57,7 +57,8 @@ export const SIDEBAR = { { text: 'Partial Hydration', link: 'de/core-concepts/component-hydration' }, { text: 'Anleitungen', header: true }, - + { text: 'Styling & CSS', link: 'de/guides/styling' }, + { text: 'Referenz', header: true }, ], nl: [ diff --git a/docs/src/pages/de/guides/styling.md b/docs/src/pages/de/guides/styling.md new file mode 100644 index 000000000..7273d49a2 --- /dev/null +++ b/docs/src/pages/de/guides/styling.md @@ -0,0 +1,645 @@ +--- +layout: ~/layouts/MainLayout.astro +title: Styling & CSS +description: Lerne Komponenten mit Astro zu gestalten. +--- + +Astro verfügt über eine besondere Möglichkeit, um das Schreiben von CSS so einfach wie möglich zu halten: Astro-Komponenten können über das Einfügen eines ` + +

Ich bin ein Style im Scope der Komponente, und ich bin rot!

+

Ich bin ein Style im Scope der Komponente, und ich bin kursiv!!

+``` + +Beachte dass der der `h1`-Selektor hier nicht über die Komponente hinaus wirksam wird! Die Styles werden nicht auf andere `h1`-Tags außerhalb dieses Dokuments angewandt - auch nicht in untergeordneten Komponenten. + +_Tipp: Auch wenn es möglich ist hier Element-Selektoren zu verwenden, sollten doch bevorzugt Klassen-Namen verwendet werden. Das ist nicht nur ein klein wenig performanter, es ist auch leichter zu lesen, insbesondere in einem umfangreichen Dokument._ + +### Globale Styles + +Natürlich besteht die tatsächliche Macht von CSS darin, Styles so häufig wie möglich wiederzuverwenden! Die bevorzugte Methode um globale Styles einzubinden, ist die Verwendung eines ``-Tags im ``-Block, ganz so wie du es gewohnt bist. Diese Methode kann in Astro auch im Zusammenhang mit dem ` + + +

Seitentitel im Scope

+ +``` + +_Beachte: `Astro.resolve()` ist ein nützliches Hilfsmittel, um Verweise auf Dateien von überall her aufzulösen ([docs][astro-resolve])_ + +#### Styling untergeordneter Elemente + +Falls du Styles, die im Scope der Komponente gesetzt werden, auch auf untergeordnete Komponenten anwenden willst, kannst du auf die `:global()`-Funktion aus den [CSS-Modules][css-modules] zurückgreifen: + +```astro + +--- +import PostContent from './Post.astro'; +--- + + +

Titel

+
+ +
+``` + +Dies ist eine sehr gute Methode, um Dinge zu stylen wie Blogposts oder Dokumente, die mit Inhalten aus einem CMS außerhalb von Astro gefüttert werden. Aber Vorsicht, wenn untergeordnete Elemente frei von Abhängigkeiten gestaltet werden, bricht dies auch die Verkapselung der Komponente auf. Das Arbeiten mit Komponenten die unterschiedlich aussehen, abhängig davon ob sie ein bestimmtes übergeordnetes Element haben oder nicht, kann sehr schnell unübersichtlich werden. + +#### Globale Styles innerhalb eines ` + +

Globaler Style

+``` + +Dasselbe kannst du erreichen, indem du einem Selektor die `:global()`-Funktion voranstellst: + +```html + +``` + +Es wird empfohlen diese Methoden nur dort einzusetzen, wo ein ``-Tag nicht funktionieren würde. Es ist sehr schwer irrige globale Styles aufzuspüren, wenn sie verteilt auftreten und nicht in einer zentralen CSS-Datei stehen. + +📚 Lies unseren vollständigen Artikel über die Syntax in [Astro-Komponenten][astro-component], um mehr über die Verwendung des ` + +``` + +_Beachte: Wir verwenden hier in sämtlichen Beispielen `lang="scss"`, welches das Verschachteln und Teilen von [Farben und Variablen][sass-use] stark vereinfacht. Dies ist jedoch gänzlich optional, und du kannst ebenso gut normales CSS verwenden._ + +Die `.btn`-Klasse ist auf die Komponente begrenzt und wird nicht über das Dokument hinaus wirksam. Dies bedeutet, du kannst dich **auf das Styling und musst dich nicht auf die Benennung konzentrieren**. Dieser Ansatz, der das Lokale an den Anfang stellt, fügt sich sehr gut in das ESM-getriebene Design von Astro, das Einkapselung und Wiederverwendbarkeit über eine globale Wirksamkeit stellt. Auch wenn es sich um ein einfaches Beispiel handelt, sollte festgehalten werden, dass dies **extrem gut skaliert**. Und für den Fall, dass du gemeinsame Werte zwischen Komponenten teilen willst, empfehlen wir das [Sass-Modulsystem][sass-use], das sehr einfach zu verwenden ist und sich perfekt in ein Design einfügt, in dem die Komponente an den Anfang gestellt wird. + +Im Kontrast zu diesem Ansatz erlaubt Astro auch globale Styles mittels der `:global()` und ` + + +``` + +Dies ist allerdings nicht erstrebenswert, da nun `