Mythos - CSS der Zukunft schreiben

CSS hat eine Reihe neuer Funktionen wie CSS-Verläufe, Schatten, Rahmenradius und Animation eingeführt, die alle nur mit CSS erreicht werden können. Es gibt auch einige Funktionen, die aufgrund der fehlenden Browserunterstützung für CSS-Variablen und CSS-Funktionen von calc() noch implementiert werden müssen. Aber wenn Sie nicht wirklich auf die Zukunft warten können, lassen Sie uns einen Blick auf Myth werfen.

Mythos verwendet im Gegensatz zu anderen Vorprozessoren, die eine eigene Syntax erfinden, dieselbe Syntax wie die Standardspezifikation . Sie können Variablen verwenden, mathematische oder Farboperationen ausführen und neue CSS-Eigenschaften in ihrer offiziellen Form schreiben. Sein Ziel ist es, Entwicklern zu ermöglichen, reines CSS zu schreiben, und gleichzeitig in der Lage sein, zukünftige Standardsyntax zu verwenden.

Anfangen

Um zu beginnen, müssen wir Myth binary installieren, um es auf den aktuellen CSS-Standard zu kompilieren. Es gibt keine GUI-Anwendung wie Codekit oder Koala, die Myth zum Zeitpunkt des Schreibens unterstützt, daher ist dies die einzige Möglichkeit , Myth in browserkonformes CSS-Format zu übersetzen .

Geben Sie in Terminal den folgenden Befehl ein:

 npm install -g Mythos 

Sie können dann diesen Befehl verwenden, um beispielsweise source.css in output.css zu kompilieren.

 mythus source.css output.css 

Oder geben Sie Folgendes ein, um die source.css zu überwachen und sie für jede Änderung in output.css zu kompilieren.

 myth --watch source.css output.css 

Myth stellt keine neue Erweiterung vor. Es funktioniert mit .css wie oben gezeigt.

CSS mit Mythos schreiben

Myth stellt auch keine proprietären Funktionen und Regeln wie die anderen CSS-Preprozessoren vor, so dass Sie sich fast sofort an Mythen gewöhnen sollten. Es ist wie einfaches CSS.

Variablen

Beginnen wir mit Variablen. In CSS wird eine Variable wie folgt deklariert:

 : root {var-length: 10px; var-Farbe: # 000; } .class {Hintergrundfarbe: var (Farbe); Breite: var (Länge); } 

Myth compiliert diesen Code in ein browserkonformes Format:

 .class {Hintergrundfarbe: # 000; Breite: 20px; } 

Sie können auf unseren vorherigen Artikel über die Verwendung von CSS-Variablen für weitere Details verweisen.

Mathematische Operationen

Wie erwähnt, können wir auch mathematische Operationen mit der neuen CSS3-Funktion calc() ausführen. Wir haben diese Funktion auch in unserem vorherigen Artikel behandelt: Verwenden der CSS3-Berechnungsfunktion.

Lasst uns unser erstes Beispiel damit erweitern:

 : root {var-length: 10px; var-Farbe: # 000; } .class {Hintergrundfarbe: var (Farbe); Breite: calc (var (Länge) / 2); } 

Myth compiles die obigen Codes in:

 .class {Hintergrundfarbe: # 000; Breite: 10px; } 

Farbanpassungen

Myth unterstützt auch einige Farboperationen oder Anpassungen wie in LESS oder Sass. Es wird vorgeschlagen, eine neue Standardfunktion in die CSS-Spezifikation namens color() einzufügen - einschließlich einer Reihe von Farbanpassungsfunktionen wie tint(), shade() und blend() nur einige zu nennen.

Unten sehen Sie ein Beispiel: Wir erhöhen die Helligkeit der Hintergrundfarbe um 80% und verringern die Randfarbe um 50% .

 : root {var-length: 20px; var-schwarz: # 000; var-weiß: #fff; } .class {Hintergrundfarbe: Farbe (var (schwarz) Helligkeit (+ 80%)); Rahmen: var (Rahmenbreite) einfarbig (var (weiß) Helligkeit (- 50%)); Breite: calc (var (Länge) / 2); } 

Dieser Code erzeugt:

 .class {Hintergrundfarbe: rgb (204, 204, 204); Grenze: 2px festes rgb (128, 128, 128); Breite: 10px; } 

Autoprefixer

Myth fügt den CSS-Eigenschaften automatisch auch ein Lieferantenpräfix hinzu . Wir können zum Beispiel einfach CSS Box Shadow schreiben:

 .class {Box-Schatten: 2px 1px 0px var (schwarz); } 

Die Ausgabe ist:

 .class {-webkit-box-shadow: 2px 1px 0px # 000; Box-Schatten: 2px 1px 0px # 000; } 

Letzter Gedanke

Ich liebe die Idee von Mythos. Damit können wir heute pures CSS der Zukunft schreiben, ohne uns Gedanken über die Browserunterstützung machen zu müssen. Und da es die Standardsyntax verwendet, müssen wir später, wenn alle Browser es (als Standard) implementiert haben, den gesamten Code nicht neu schreiben. Ich denke, ich werde es in jedem meiner zukünftigen Projekte verwenden. Was ist mit Ihnen? Wirst du das gleiche übernehmen?

Generieren Sie Dokumentation mit Markdown-Dateien mit Docsify

Wenn Sie ein kostenloses Plugin, Framework oder Open-Source-Skript erstellen, benötigen Sie Dokumentation . Es ist wichtig, deine Arbeit zu dokumentieren, sowohl für deine Gesundheit als auch für andere, die deine großartige Ressource lernen wollen.Das Erstellen einer Online-Dokumentation kann jedoch sehr schmerzhaft sein. Zu

(Tech- und Design-Tipps)

5 AngularJS Frameworks, um Apps schnell einsatzbereit zu machen

Jetzt, wo Sie mit den Grundlagen vertraut sind, ist es an der Zeit, mit AngularJS eine eigene Webanwendung zu entwickeln . AngularJS hat das Erstellen einer JavaScript-basierten App intuitiver gemacht, indem man sogenannte Direktiven verwendet, die Hand in Hand mit Ihren HTML-Markups arbeiten.Wenn Sie eine Webanwendung vom Boden aus erstellen, erscheint Ihnen das überwältigend, keine Sorge.

(Tech- und Design-Tipps)