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?

5 Fragen zu Fragen vor der Installation eines WordPress-Plugins

Plugins machen WordPress leistungsfähig - wir können fast jede Funktionalität zu WordPress einfach mit einem Plugin ändern und hinzufügen. Allerdings sind nicht alle Plugins gleich. Während einige Plug-ins Funktionen auf Ihrer Website erweitern können, können andere Ihre Website sogar daran hindern, zu funktionieren . Es gib

(Tech- und Design-Tipps)

Colors.css bietet neue Standardwerte für Farben im Web

Ein gutes Farbschema für Ihre Website zu finden, ist keine leichte Aufgabe. Aber mit der Colors-Bibliothek von Adam Morse ist es viel einfacher geworden.Diese kostenlose CSS-Bibliothek arbeitet mit den Original-Webfarben, die 1999 als "websicher" eingestuft und erstmals mit HTML4 veröffentlicht wurden.

(Tech- und Design-Tipps)