Share
In diesem Tutorial werde ich Sie durch ein Werkzeug namens Myth führen. Myth ist ein alternativer CSS-Präprozessor, der im Gegensatz zu Sass oder LESS keine proprietäre Syntax verwendet. Stattdessen übernimmt Myth die "zukünftige" CSS-Syntax, wie im Arbeitsentwurf angegeben. Denken Sie an Mythos wie die Bildfüllung, die uns die Verwendung von HTML5 ermöglicht
„CSS, wie es sich vorgestellt hat.
Bevor wir Myth benutzen können, müssen wir zuerst ein paar Dinge einrichten. Lass uns anfangen!
Mythos ist ein Node.js-Paket, das es ermöglicht, auf verschiedenen Plattformen zu arbeiten. Sie müssen daher sicherstellen, dass Sie Node.js sowie NPM (Node Package Manager) in Ihrem System installiert haben. Starten Sie zur Überprüfung Terminal oder Eingabeaufforderung, und geben Sie Folgendes ein Knoten -v && npm -v, wie folgt:
Dies zeigt an, dass Node.js und NPM installiert sind.Dieser Befehl sollte die Version von Node.js und NPM wie oben gezeigt zurückgeben. Andernfalls müssen Sie sie installieren, bevor Sie fortfahren. NPM hat einen kurzen Screencast zur Verfügung gestellt, der Sie durch den Prozess führt. Sie können auch unsere vorherigen Serien und Kurse verfolgen, um herauszufinden, worum es bei Node.js geht.
Wenn Sie nun Node.js und NPM eingerichtet haben, können Sie Myth mit dem folgenden Befehl installieren:
npm install -g Mythos
Das -G Mit dem hinzugefügten Parameter wird die Myth-Bibliothek installiert global, Dadurch kann Myth überall und in jedem Verzeichnis unseres Systems aufgerufen werden.
Sobald Sie fertig sind, haben Sie Zugriff auf die Mythos Befehl. Laufen Mythos - Version, Zum Beispiel wird Ihnen die aktuelle Version von Myth angezeigt, die auf Ihrem System installiert ist.
Das 
Accentsconagua
Mythos Befehl funktioniert.Myth funktioniert mit jeder textbasierten Dateierweiterung. Stylesheets können eingestellt werden .TXT, .css, oder auch .Mythos. Hier verwende ich einfach .css Daher muss ich meinen Code-Editor nicht konfigurieren, um den Code mit den richtigen Farben für die Syntaxhervorhebung zu rendern.
Führen Sie den folgenden Befehl aus, myth --watch build / app.css app.css um Änderungen innerhalb des Stylesheets im zu überwachen /bauen Ordner und kompilieren Sie es in eine entsprechende Datei.
Das Stylesheet wird im Stammverzeichnis in app.css kompiliert.Wir sind alle bereit, Mythos zu benutzen!
Myth ist im Wesentlichen ein CSS-Präprozessor, der es uns ermöglicht, neue CSS-Syntax zu schreiben (die möglicherweise in Zukunft standardisiert sein wird), um sie in das browserkompatible CSS-Format von heute zu kompilieren. Die Unterstützung von Mythos umfasst die Verwendung von CSS - Variablen, CSS - Farbmanipulation und einige CSS - Techniken, die derzeit teilweise oder nicht einheitlich unterstützt werden, wie z :: Platzhalter Pseudoklasse und calc ().
Die Verwendung von Variablen hilft uns erheblich bei der Pflege von Stylesheets. Dies ist möglicherweise der Hauptgrund dafür, warum CSS-Präprozessoren so gut angenommen wurden. Nichtsdestotrotz werden Variablen in CSS als native Funktion verwendet. Nach dem neuesten Arbeitsentwurf würden wir einen Doppelstrich verwenden -- eine Variable anstelle von definieren var- Präfix wie in einem früheren Entwurf angegeben:
: root / ** [frühere Version und veraltet] * / var-color-primary: # 000; var-color-second: #fff; / ** [neueste Version] * / --color-primary: # 000; --color-secondary: #fff;
Das :Wurzel Der Pseudoklassenselektor bezieht sich auf das Wurzelelement des Markup-Dokuments. Im Falle von HTML bezieht sich dies auf das Element, in SVG wäre es das . Da das Wurzelelement die höchste Ebene eines Dokuments ist, setzen Sie unsere Variablen in das :Wurzel ermöglicht den Zugriff auf alle Stilregeln innerhalb des Stylesheets. Sie können den Gültigkeitsbereich der Variablen einschränken, indem Sie sie innerhalb eines spezifischeren Selektors deklarieren.
Wir benutzen das Neue var () Funktion zum Anwenden einer Variablen in einer Stilregel, zum Beispiel:
: root --color-primary: # 000; --color-secondary: #fff; h1, h2, h3 color: var (- color-second); .panel Hintergrundfarbe: var (- Primärfarbe); Farbe: var (- Farbe sekundär);
Dieses Beispiel liefert uns die folgende Ausgabe (wie Sie vielleicht erwartet haben):
h1, h2, h3 color: #fff; .panel Hintergrundfarbe: # 000; Farbe: #fff;
Werte in Variablen können alles sein - eine Farbe, eine Zeichenfolge, eine Länge oder sogar eine mathematische Operation, die CSS verwendet calc () Funktion. Werte in der Variablen können auch gemäß der CSS-Kaskadenregel wiederverwendet oder vererbt werden. Im Folgenden bestimmen wir beispielsweise die Zeilenhöhe Wert basierend auf der vorhergehenden Variablen.
: root --font-size-base: 16px; --line-height-base: berechnet (16px + 10); p font-size: var (- font-size-base); Zeilenhöhe: var (- Zeilenhöhe-Basis);
Das gibt uns:
p Schriftgröße: 16px; Zeilenhöhe: 26px;
Ein Browser, der derzeit nativ CSS-Variablen unterstützt, ist Firefox (die vollständige Liste finden Sie auf CanIUse.com)..
Die Farbmanipulationsfunktion gibt uns die Möglichkeit, Farben intuitiver zu ändern. Sie müssen den Farbwähler nicht nur auswendig lernen oder jonglieren, um nur die richtige Farbe auszuwählen. Dies ist bei CSS-Präprozessoren üblich, aber Farbe() (Teil des CSS Color Mod Level 4) wird es uns ermöglichen, Farben in einfachem CSS zu ändern. Diese neue Funktion arbeitet, indem die Farbe zusammen mit einem sogenannten angegeben wird Farbeinsteller:
Element Hintergrundfarbe: Farbe ();
Farbeinsteller, die Myth unterstützt:
Leichtigkeit(), um die Helligkeit der gegebenen Farbe zu verändern.Weiße(), um die weiße Intensität der angegebenen Farbe zu ändern.Schwärze(), ähnlich zu Weiße(), außer, es ändert die Schwarzintensität.Sättigung(), um die Farbsättigung zu verändernFarbton() , eine hellere Farbe zu erzeugen, indem die gegebene Farbe mit Weiß gemischt wird.Schatten() , eine dunkle Farbe zu erzeugen, indem die gegebene Farbe mit Schwarz gemischt wird.Das folgende Beispiel wird aufgehellt #ccc (dunkelgrau) um 20%.
p color: color (#ccc-Helligkeit (20%));
… Die sich zusammensetzt in:
p color: rgb (51, 51, 51);
Alternativ können Sie die Farbe auch durch eine Variable leiten, die uns dieselbe Ausgabe liefert:
: root --color-primary: #ccc; p color: color (var (- Primärfarbe) Helligkeit (20%));
Farbe() ist eine Funktion, die in Verbindung mit CSS3 sehr hilfreich sein kann linearer Gradient Um Farbverläufe zu bestimmen, zum Beispiel:
.Taste Hintergrund: linearer Farbverlauf (nach unten, var (- Primärfarbe), Farbe (Var (- Primärfarbe)) (10%)); ;
Das Schriftvariante Eigentum ist etwas anderes, was wir in Mythos verwenden können. Schriftvariante ist eigentlich seit CSS1 mit nur zwei akzeptierten Werten in CSS vorhanden, normal und Small Caps. In CSS3 ist ein Teil des CSS-Schriftartenmoduls der Schriftvariante Die Eigenschaft wurde um akzeptablere Werte sowie bestimmte Eigenschaftszusätze wie z Schriftvariante-Ostasiatisch Dadurch können wir Variationen chinesischer Glyphen auswählen, vereinfacht oder traditionell.
Versuchen wir, alle Buchstaben einer Überschrift in kleine Kapitelle zu verwandeln:
h1 font-Variante: Kleinbuchstaben;
Myth wird diesen Code wie folgt kompilieren:
p -webkit-font-feature-settings: "smcp", "c2sc"; -moz-font-feature-settings: "smcp", "c2sc"; font-feature-settings: "smcp", "c2sc"; Schriftvariante: All-Small-Caps;
Das All-Small-Caps value zwingt alle Zeichen, einschließlich Klein- und Großbuchstaben, in Kleinbuchstaben. Denken Sie jedoch daran All-Small-Caps wirkt sich nur auf bestimmte Schriftfamilien aus, die kleine Glyphen wie Helvetica, Arial und Lucida Grande enthalten. Wenn keine Großbuchstaben verwendet werden, gibt die Glyphe "unbekannt" zurück:
Mit freundlicher Genehmigung: Typography.comFirefox ist im Moment der einzige Browser, der die anständige Unterstützung für Schriftvariante Eigentum. Viele Werte außer dem Small Caps (vorhanden seit CSS1) schlägt in anderen Browsern, einschließlich Chrome und Safari, fehl. (siehe vollständige Kompatibilitätsliste in CanIUse.com).
Myth beinhaltet auch Autoprefixer, mit dem Browser-Präfixe für bestimmte Eigenschaften eingefügt werden können. Gehen Sie zum Github-Repo, um weitere unterstützte CSS-Funktionen zu finden. Es gibt auch ein Plugin für Grunt und Gulp, um Ihren Arbeitsablauf zu bedienen.
Myth ist schließlich ein CSS-Präprozessor für alle, die am Rande des Internets leben. Unabhängig davon, ob Sie Myth als normales CSS-Tool verwenden oder nicht, wir können daraus schließen, dass es einige neue aufregende CSS-Funktionen zeigt, die das Web in Zukunft viel besser machen werden.
