Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Native CSS-Variablen mit Myth: Der Anfang vom Ende für LESS und SASS?

Myth unterstützt die native CSS-Syntax für CSS-Variablen. (Screenshot: Myth)

Heute zeigen wir euch Myth. Ein CSS-Postprozessor und Quasi-„polyfill“ um unter anderem native Variablen in CSS, laut dem W3C-Entwurf, umsetzen zu können.

Bildschirmfoto 2013-12-18 um 07.49.22
Myth: Native Unterstützung von CSS-Variablen. (Screenshot: Myth)

Neben Präprozessoren gibt es auch noch Postprozessoren für CSS. Daneben arbeitet die W3C seit kurzem an einer nativen Unterstützung von CSS-Variablen. Heute zeigen wir euch Myth, ein Quasi-„polyfill“, dass euch euch erlaubt native CSS-Variablen bereits jetzt in euren Webprojekten einzusetzen.

Native CSS-Variablen mit Myth

Vor kurzem haben wir euch berichtet, dass auch Mozilla an einer Unterstützung von CSS-Variablen arbeitet und wie die Syntax dazu aussieht. Das Myth-Skript, dass ihr euch über das Command-Line-Tool von Node.js, also npm beziehen könnt, erlaubt es die neue CSS-Syntax für Variablen zu verwenden. Diese Syntax wird dann anschließend in derzeit valides CSS umgewandelt. Der Vorteil: Wenn der neue W3C-Entwurf zum Standard wird, könnt ihr einfach eure Stylesheets weiterverwenden, die dann bereits in der neuen Syntax geschrieben wurden.

Derzeit unterstützt Myth native CSS-Variablen, Rechenoperationen, Farbmanipulation und „No-Prefixes“.

In der Shell könnt ihr folgendes Kommando eingeben, um euch Myth installieren zu lassen.

$ npm install -g myth

Der letzte Schritt, nämlich eine Bereitstellng einer, für den Browser lesbaren, CSS-Datei ist denkbar einfach:

$ myth input.css output.css

Wobei input.css für eure Datei steht, die Anweisungen von Myth enthält und output.css den Namen der Datei definiert, in welche der neu generierte und lesbare CSS-Code generiert wird.

Fazit

In einem kurzen Test funktionierte Myth wunderbar und durchaus schnell. Auf der Website zu Myth findet ihr übrigens auch noch einige Beispiele zur „neuen“ CSS-Syntax. Wünscht ihr euch mehr zum Thema npm?

Werdet ihr Postprozessoren wie Myth für eure Projekte verwenden?

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

7 Reaktionen
Martin

So ganz zufrieden bin ich mit dem Artikel nicht. Die Überschrift ist auch mal wieder sehr unglücklich.

Bei Myth geht es nicht einfach darum, Preprocessors wie SASS und LESS zu ersetzen. Es geht darum, dass man als Entwickler die aktuellsten Specs bereits heute benutzen kann, ohne sich sorgen um Kompatiblität machen zu müssen. Werden die Features mit der Zeit in allen Browsern unterstützt, muss man lediglich Myth entfernen und nichts am Code verändern.

Antworten
Mario

Da SASS einfacher und somit angenehmer als der W3C Vorschlag ist, werde ich keinesfalls auf Myth setzen.

Antworten
Mario Janschitz

Klar geht es nur um den Output, sehe ich genauso wie @oink und @simonwpt. Persönlich ziehe ich aber eine native Unterstützung vor und begrüße eine Standardisierung. Ich finde alleine die Idee total gut, dass ich native CSS-Variablen zur Laufzeit überschreiben kann.

Antworten
Bertram Simon

@oink Der Syntax von SASS ist ohne Klammern und funktioniert wie Stylus auf Basis von Einrückungen. Der SCSS-Syntax von SASS arbeitet mit Klammern, was je nach Anwendungsfall auch seine Vorteile hat. Außerdem unterstützt SASS neben Mixins auch Functions.

Ansonsten sehe ich das wie @Daniel recht entspannt. Es geht bei allen Tools um Arbeitserleichterung und Entwicklungskatalysatoren.

Antworten
Oink

Defintiv nicht das Ende. Wobei ich weder SASS noch LESS mag. Weil es wieder in die alte "{};"-Syntax verfällt. Lieber Stylus+Nib und Ruhe ist. Spuckt reines CSS aus mit allen Vendorpräfxien und ich muss nicht irgendwelche Mixins-Syntax von SASS oder LESS rumärgern und ich bin die blöden Klammern und Semikolons los. Ich mag das simple einrücken und mit einem ordentlichen Editor/IDE ist das auch alles kein Problem. Tippe weniger und erreiche mehr, sag ich nur :D

Antworten
Daniel

Im Endeffekt zählt nur der valide Output. Ob ich dass nun mit SASS, LESS oder Myth bewerkstellige oder aber alles oldschool von Hand schreibe, bleibt im doch im Grunde mir selbst überlassen. Warum also das Ende von SASS und LESS?

Antworten
Fimbim

Solange es hier keine Mixins oder Nesting gibt, sehe ich keinen Grund nicht weiter Sass oder Less zu verwenden. Das bietet deutlich mehr Möglichkeiten und lässt sich auch leicht mit den nötigen Polyfills ausrüsten…

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.