Vanilla-Extract: Eine neue Bibliothek mit Framework-in-Typeskript. Es bietet eine leichte, robuste und intuitive Möglichkeit, Stile zu schreiben. Vanilla-Extract ist kein obligatorisches CSS-Framework, sondern ein flexibles Entwicklerwerkzeug. In den letzten Jahren war das CSS-Tool-Feld relativ stabil, wobei Tools wie Postcs, SASS, CSS-Module und gestaltete Komponenten vor 2017 (einige noch früher) erscheinen und heute noch sehr beliebt sind. Tailwind ist eines der wenigen Tools, die in den letzten Jahren Veränderungen im Bereich CSS Tool vorgenommen haben.
Vanilla-Extract zielt darauf ab, Veränderungen erneut auszulösen. Es wurde dieses Jahr veröffentlicht und profitierte von einigen der neuesten Trends, darunter:
Es gibt viele clevere Innovationen in Vanilla-Extract, was ich denke, dass es sinnvoll ist.
Die CSS-in-JS-Bibliothek injiziert normalerweise zur Laufzeit ein Dokument in ein Dokument. Dies hat einige Vorteile, einschließlich kritischer CSS -Extraktion und dynamischer Stile.
Normalerweise funktionieren einzelne CSS -Dateien besser. Dies liegt daran, dass der JavaScript -Code einen teureren Analyse-/Kompilierungsprozess durchlaufen muss, während separate CSS -Dateien zwischengespeichert werden können, während das HTTP2 -Protokoll die Kosten zusätzlicher Anforderungen reduziert. Darüber hinaus sind benutzerdefinierte Eigenschaften für viele dynamische Stile kostenlos erhältlich.
Daher folgt Vanilla-Extract Linaria und Astroturf, anstatt zur Laufzeit Stile zu injizieren. Diese Bibliotheken ermöglichen es Ihnen, JavaScript -Funktionen zu stylen, die zum Erstellen von Zeiten extrahiert und zum Erstellen von CSS -Dateien verwendet werden. Obwohl Sie Vanilla-Extract mit TypeScript schreiben, wirkt sich dies nicht auf die Gesamtgröße des Produktions-JavaScript-Pakets aus.
Einer der großartigen Wertvorschläge von Vanilla-Extract ist, dass es Typenprüfung bietet. Wenn es sehr wichtig ist, den Codebasis -Typ sicher zu halten, warum tun Sie dies nicht auch mit Stilen?
TypeScript bietet viele Vorteile. Der erste ist die automatische Fertigstellung. Wenn Sie "FO" in den Editor eingeben, der TypeScript unterstützt, erhalten Sie eine Dropdown-Liste mit Schriftoptionen (Fontfamily, Fontskanning, Schriftgewicht oder andere Übereinstimmungen), aus denen Sie auswählen können. Dies macht CSS -Eigenschaften mit der Bequemlichkeit des Herausgebers leicht zu entdecken. Wenn Sie sich nicht an den Namen von Fontvariant erinnern, aber wissen, dass er mit "Schriftart" beginnt, können Sie ihn eingeben und durch die Optionen scrollen. In VS Code müssen Sie keine zusätzlichen Tools herunterladen, um dies zu erreichen.
Dies beschleunigt das Schreiben von Stilen stark:
Dies bedeutet auch, dass Ihr Editor Sie ständig überwacht und sicherstellt, dass Sie keine Rechtschreibfehler machen, die zu frustrierenden Fehlern führen können.
Der Vanilla-Extract-Typ bietet auch eine Syntaxinterpretation und Links zum MDN-Dokument für die CSS-Eigenschaften, die Sie in seiner Typdefinition bearbeiten. Dies spart den Schritt der verrückten Google -Suche, wenn sich der Stil ungewöhnlich verhält.
Schreiben mit TypeScript bedeutet, dass Sie die Kamel -Nomenklatur verwenden, um CSS -Eigenschaften wie Hintergrundkolor darzustellen. Dies erfordert möglicherweise einige Änderungen für Entwickler, die es gewohnt sind, eine reguläre CSS-Syntax wie die Hintergrundfarbe zu verwenden.
Vanilla-Extract bietet die Integration der Erstanbieter für die neuesten Verpackungswerkzeuge. Hier ist eine vollständige Liste der Integrationen, die derzeit unterstützt werden:
Es hat auch nichts mit dem Rahmen zu tun. Sie importieren einfach Klassennamen aus Vanilla-Extract, die zur Bauzeit in Zeichenfolgen konvertiert werden.
Um Vanilla-Extract zu verwenden, können Sie eine .css.ts Datei schreiben, die Ihre Komponenten importieren können. Anrufe zu diesen Funktionen werden im Build -Schritt in Hash- und Scoped -Klasse -Namen umgewandelt. Dies mag ähnlich wie CSS-Module klingen, und es ist kein Zufall: Mark Dalgeish, einer der Schöpfer von Vanilla-Extract, ist auch Co-Schöpfer von CSS-Modulen.
style() Funktion Sie können style() verwenden, um eine automatisch Scoped CSS -Klasse zu erstellen. Sie passieren im Stil des Elements und exportieren dann den Rückgabewert. Importieren Sie diesen Wert irgendwo in Ihrem Benutzercode und er wird in den Geltungsklassennamen konvertiert.
// title.css.ts
import {style} aus "@vanilla-extract/css";
Export const titlestyle = style ({{
BackgroundColor: "HSL (210 Grad, 30%, 90%)", "
Fontfamilie: "Helvetica, Sans-Serif",
Farbe: "HSL (210 Grad, 60%, 25%)",
Polsterung: 30,,
Borderradius: 20,
}); // title.ts
Import {TitLestyle} aus "./title.css";
document.getElementById ("root"). innerhtml = `<h1> Vanilleextrakt</h1> `;Medienabfragen und Pseudo-Selektoren können auch in die Stilerklärung einbezogen werden:
// title.css.ts
BackgroundColor: "HSL (210 Grad, 30%, 90%)", "
Fontfamilie: "Helvetica, Sans-Serif",
Farbe: "HSL (210 Grad, 60%, 25%)",
Polsterung: 30,,
Borderradius: 20,
"@media": {
"Bildschirm und (max. Width: 700px)": {{
Polsterung: 10
}
},
":schweben":{
BILTTERCOLOR: "HSL (210 Grad, 70%, 80%)"
} Diese style sind eine leichte Abstraktion von CSS - alle Attributnamen und -Werte werden den CSS -Eigenschaften und -Wergen, mit denen Sie vertraut sind, zugeordnet. Eine Änderung, an die Sie sich gewöhnen können, ist, dass Werte manchmal als Zahlen deklariert werden können (z. B. Polsterung: 30), was den Pixeleinheitswerten definiert, während einige Werte als Zeichenfolgen deklariert werden müssen (z. B. Polsterung: "10px 20px 15px 15px").
Eigenschaften in style können nur einen einzelnen HTML -Knoten beeinflussen. Dies bedeutet, dass Sie Nesting nicht verwenden können, um den Stil der Elementelemente zu deklarieren, an die Sie möglicherweise in Sass oder Postcss gewöhnt werden. Stattdessen müssen Sie die Kinderelemente separat stylen. Wenn das untergeordnete Element auf verschiedenen Stilen des übergeordneten Elements basieren muss, können Sie selectors verwenden, um Stile hinzuzufügen, die vom übergeordneten Element abhängen:
// title.css.ts
Export const Innerspan = style ({{
Selektoren: {[`$ {TitLestyle} &`]: {{
Farbe: "HSL (190 Grad, 90%, 25%)", "
FontStyle: "Italic",
Textdekoration: "Unterstreich"
}}
}); // title.ts
Import {TitLestyle, Innerspan} von "./title.css";
document.getElementById ("root"). innerhtml =
`<h1> Vanilleextrakt</h1>
Nicht styled ";Alternativ können Sie die Themen -API (über die wir als nächstes sprechen) verwenden, um benutzerdefinierte Eigenschaften im übergeordneten Element zu erstellen, die von den untergeordneten Knoten verwendet werden. Dies mag streng klingen, aber absichtlich entwickelt, um die Wartbarkeit großer Codebasen zu verbessern. Dies bedeutet, dass Sie genau wissen, wo der Stil jedes Elements im Projekt deklariert ist.
Sie können mit createTheme -Funktion Variablen in einem Typenkriptobjekt erstellen:
// title.css.ts
importieren {style, createTheme} aus "@vanilla-extract/css";
// Theme Export const [Wattemhemen, vars] = createThee ({{{
Farbe:{
Text: "HSL (210 Grad, 60%, 25%)",
Hintergrund: "HSL (210 Grad, 30%, 90%)"
},
Längen: {
Mediumgap: "30px"
}
})
// Topic Export const TitLestyle = style ({{{{{
BackgroundColor: vars.Color.background,
Farbe: vars.color.text,
Fontfamilie: "Helvetica, Sans-Serif",
Polsterung: varsgths.mediumgap,
Borderradius: 20,
});Mit Vanilla-Extract können Sie dann Variationen des Themas erstellen. TypeScript hilft dafür, dass Ihre Varianten denselben Attributnamen verwenden. Wenn Sie also vergessen, Ihrem Thema Hintergrundattribute hinzuzufügen, erhalten Sie eine Warnung.
Hier erfahren Sie, wie Sie ein reguläres Thema und einen dunklen Modus erstellen:
// title.css.ts
importieren {style, createTheme} aus "@vanilla-extract/css";
exportieren const [Wattemhemen, vars] = createTheme ({{{{{{
Farbe:{
Text: "HSL (210 Grad, 60%, 25%)",
Hintergrund: "HSL (210 Grad, 30%, 90%)"
},
Längen: {
Mediumgap: "30px"
}
})
// Themenvariante - Beachten Sie, dass dieser Teil keine Array -Syntax -Export const dunkmode = createThey (vars, {
Farbe:{
Text: "HSL (210 Grad, 60%, 80%)",
Hintergrund: "HSL (210 Grad, 30%, 7%)",
},
Längen: {
Mediumgap: "30px"
}
})
// Topic Export const TitLestyle = style ({{{{{
BackgroundColor: vars.Color.background,
Farbe: vars.color.text,
Fontfamilie: "Helvetica, Sans-Serif",
Polsterung: varsgths.mediumgap,
Borderradius: 20,
});Mit JavaScript können Sie dann den von Vanilla-Extract zurückgegebenen Klassennamen dynamisch anwenden, um Themen zu wechseln:
// title.ts
Import {TitLestyle, Mattemheme, DarkMode} aus "./title.css";
document.getElementById ("root"). innerhtml =
`<div>
<h1>Vanilleextrakt</h1>
Dunkler Modus
</div>` Wie funktioniert das unten? Das Objekt, das Sie in der createTheme -Funktion deklarieren, wird in eine an die Elementklasse angehängte CSS -Eigenschaft umgewandelt. Diese benutzerdefinierten Eigenschaften werden gehasht, um Konflikte zu verhindern. Das Ausgangs -CSS unseres Beispiels aus mainTheme sieht Folgendes aus:
.src__ohrzop0 {
-Color-Brand__Ohrzop1: HSL (210 Grad, 80%, 25%);
-Color-Text__OHRZOP2: HSL (210 Grad, 60%, 25%);
-Color-Background__Ohrzop3: HSL (210 Grad, 30%, 90%);
-Länge-mediumgap__ohrzop4: 30px;
} Und die CSS -Ausgabe unseres darkMode -Themas lautet wie folgt:
.src__ohrzop5 {
-Color-Brand__Ohrzop1: HSL (210 Grad, 80%, 60%);
-Color-Text__OHRZOP2: HSL (210de, 60%, 80%);
-Color-Background__Ohrzop3: HSL (210 Grad, 30%, 10%);
-Länge-mediumgap__ohrzop4: 30px;
} Daher müssen wir nur den Klassennamen im Benutzercode ändern. Wenden Sie den Namen des darkmode -Klassennamens auf das übergeordnete Element an, mainTheme wird durch darkMode ersetzt.
style und createTheme reichen aus, um eine Website selbst zu stylen, aber Vanilla-Extract bietet zusätzliche APIs für eine verbesserte Wiederverwendbarkeit. Mit der Rezepte -API können Sie viele Variationen für Elemente erstellen, aus denen Sie in Tags oder Benutzercode auswählen können.
Zuerst müssen Sie es separat installieren:
npm install @vanilla-extract/Rezepte
So funktioniert es. Sie importieren recipe Rezeptfunktion und übergeben in ein Objekt, das base und variants enthält:
// button.cs.ts
{Rezept} aus '@vanilla-extract/Rezepten' importieren;
exportieren const buttonStyles = Rezept ({{
Base:{
// Die auf alle Schaltflächen angewendeten Stile sind hier platziert},
Varianten: {
// Der Stil, den wir von hier aus wählen}
}); In base können Sie die Stile deklarieren, die auf alle Varianten angewendet werden. In variants können Sie verschiedene Möglichkeiten zum Anpassen von Elementen bieten:
// button.cs.ts
{Rezept} aus '@vanilla-extract/Rezepten' importieren;
exportieren const buttonStyles = Rezept ({{
Basis: {
Schriftgewicht: "mutig",
},
Varianten: {
Farbe: {
Normal: {
BackgroundColor: "HSL (210 Grad, 30%, 90%)", "
},
Calltoaction: {
BackgroundColor: "HSL (210 Grad, 80%, 65%)", "
},
},
Größe: {
Groß: {
Polsterung: 30,,
},
Medium: {
Polsterung: 15,
},
},
},
});Sie können dann die Variante deklarieren, die Sie im Tag verwenden möchten:
// button.ts
import {buttonStyles} aus "./button.css";
Klicken Sie auf michVanilla-Extract bietet eine automatische Fertigstellung für Ihre eigenen Variantennamen mit TypeScript!
Sie können die Varianten so benennen, wie Sie möchten, und die gewünschten Attribute einfügen, zum Beispiel:
// button.cs.ts
exportieren const buttonStyles = Rezept ({{
Varianten: {
Tier: {
Hund: {
Hintergrund: 'URL ("./ Dog.png")',,
},
Katze: {
Hintergrund: 'URL ("./ Cat.png")',,
},
Kaninchen: {
Hintergrund: 'URL ("./ Rabbit.png")',,
},
},
},
});Sie können sehen, dass dies sehr nützlich ist, um Designsysteme zu bauen, da Sie wiederverwendbare Komponenten erstellen und steuern können, wie sie sich ändern. Diese Änderungen sind mit TypeScript einfach zu erkennen.
Sprinkles ist ein praktisches Prioritätsgerüst, das auf Vanilla-Extract basiert. Das Vanilla-Extract-Dokument beschreibt es wie folgt:
Grundsätzlich ist es so, als würde man eine eigene Version von Zero Runtime, Typ-Safe-Rückenwind, gestyltem System und vieles mehr erstellen.
Wenn Sie also nicht gerne Dinge benennen (wir alle haben Albträume, erstellen eine externe Wrapper-Div und stellen dann fest, dass wir sie mit ... externen externen Wrapper einwickeln müssen), Streusel sind möglicherweise Ihre bevorzugte Art, Vanilla-Extrahle zu verwenden.
Die Streusel -API muss auch separat installiert werden:
npm install @vanilla-extract/sprinkles
Jetzt können wir einige Bausteine für unsere praktischen Funktionen erstellen. Erstellen wir eine Farb- und Längenliste, indem wir mehrere Objekte deklarieren. Der JavaScript -Schlüsselname kann alles sein, was wir wollen. Der Wert muss ein gültiger CSS -Wert für das CSS -Attribut sein, das wir verwenden möchten:
// sprinkles.css.ts
const colors = {
Blue100: "HSL (210 Grad, 70%, 15%)", "
Blue200: "HSL (210 Grad, 60%, 25%)",
Blue300: "HSL (210 Grad, 55%, 35%)", "
Blue400: "HSL (210 Grad, 50%, 45%)", "
Blue500: "HSL (210 Grad, 45%, 55%)", "
Blue600: "HSL (210 Grad, 50%, 65%)", "
Blue700: "HSL (207de, 55%, 75%)", "
Blue800: "HSL (205 Grad, 60%, 80%)", "
Blue900: "HSL (203 Grad, 70%, 85%)", "
};
const längen = {
klein: "4px",
Medium: "8px",
groß: "16px",
Humung: "64px"
}; Wir können die Funktion defineProperties verwenden, um zu erklären, welche CSS -Eigenschaften diese Werte angewendet werden:
properties enthält.properties deklarieren wir ein Objekt, bei dem die Schlüssel CSS -Eigenschaften sind, die der Benutzer festlegen kann (diese müssen gültige CSS -Eigenschaften sein), und der Wert ist das zuvor erstellte Objekt (unsere Liste der Farben und Längen). // sprinkles.css.ts
importieren {defineProperties} aus "@vanilla-extract/sprinkles";
const colors = {
Blue100: "HSL (210 Grad, 70%, 15%)"
// usw.
}
const längen = {
klein: "4px",
// usw.
}
const properties = defineProperties ({{
Eigenschaften: {
// Der Schlüssel dieses Objekts muss ein gültiges CSS -Attribut sein // Der Wert ist die Option, die wir der Benutzerfarbe angeben: Farben,
Hintergrundkolor: Farben,
Polsterung: Längen,
},
}); Dann besteht der letzte Schritt darin, den Rückgabewert von defineProperties an die Funktion createSprinkles zu übergeben und den Rückgabewert zu exportieren:
// sprinkles.css.ts
importieren {defineProperties, createSPrinkles} aus "@vanilla-extract/sprinkles";
const colors = {
Blue100: "HSL (210 Grad, 70%, 15%)"
// usw.
}
const längen = {
klein: "4px",
// usw.
}
const properties = defineProperties ({{
Eigenschaften: {
Farbe: Farben,
// usw.
},
});
Export const Springles = createSPrinkles (Eigenschaften); Wir können dann die Inline -Stile in der Komponente starten, indem wir die sprinkles -Funktion im class aufrufen und die gewünschte Option für jedes Element auswählen.
// index.ts
importieren {sprinkles} aus "./sprinkles.css";
document.getElementById ("root"). Innerhtml = klicken Sie auf mich
`;Die JavaScript -Ausgabe speichert eine Klassennamenzeichenfolge für jedes Style -Attribut. Diese Klassennamen stimmen mit einer einzelnen Regel in der Ausgabe -CSS -Datei überein.
Klicken Sie auf mich
Wie Sie sehen können, können Sie mit dieser API Elemente innerhalb eines Tags unter Verwendung einer Reihe vordefinierter Einschränkungen stylen. Sie können auch die schwierige Aufgabe vermeiden, für jedes Element einen Klassennamen zu finden. Das Ergebnis ist etwas, das sich dem Rückenwind sehr ähnlich anfühlt, aber auch von der gesamten Infrastruktur profitiert, die sich um TypeScript basiert.
Mit der Streut -API können Sie auch Bedingungen und Abkürzungen schreiben, um reaktionsschnelle Stile mithilfe von Dienstprogrammklassen zu erstellen.
Vanilla-Extract fühlt sich wie ein großer Fortschritt im Bereich der CSS-Tools an. Es wurde viel darüber nachgedacht, dass es in eine intuitive, robuste Lösung aufgebaut wurde, die alle Funktionen nutzt, die das statische Typing bietet.
Diese überarbeitete Ausgabe behält die ursprüngliche Bedeutung bei, während sie unterschiedliche Formulierungen und Satzstrukturen verwenden.
Das obige ist der detaillierte Inhalt vonCSS in TypeScript mit Vanilla-Extract. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
js ruft die aktuelle Uhrzeit ab
Wie lautet der chinesische Name der Fil-Münze?
So lösen Sie das Problem, dass der PHPStudy-Port belegt ist
So lösen Sie das Problem eines ungültigen Datenbankobjektnamens
So ändern Sie C-Sprachsoftware auf Chinesisch
Thunder-Mitgliedschaftspatch
Was tun, wenn die PHP-Deserialisierung fehlschlägt?
Überprüfen Sie den Status der belegten Ports in Windows
Der Kern der Computersystemsoftware
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
