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?

Warum Positiv sein ist nicht immer die beste Route zu nehmen

Es gibt Unmengen von Literatur, die "positives Denken" als Schlüssel zum Glück befürworten . Während zahlreiche Forschungsergebnisse die vielen Vorteile einer optimistischen Lebenseinstellung ans Licht gebracht haben, bevorzugen einige von uns eine realistischere Perspektive und lehnen es ab, eine Pollyanna-Sicht der Welt anzunehmen.Das

(Tech- und Design-Tipps)

10 Chat-Tools für bessere Kommunikation in Team-Projekten

Wenn Sie Ideen in einer Teamumgebung zusammenstellen, benötigen Sie ein zuverlässiges Kommunikationsmittel. Die Leute, mit denen du arbeitest, sollten alle ihre eigenen Ideen einbringen, während alle auf der gleichen Seite bleiben . Dies ist einfacher, wenn Sie in demselben physischen Bürobereich zusammenarbeiten. Ab

(Tech- und Design-Tipps)