Share
Die Webentwickler-Community hat kürzlich einige wichtige Neuigkeiten erhalten. Experimente sind zwar noch nicht in den Nachthemen, aber die Experimente sind wieder im Gange, was uns, wenn er erfolgreich ist, native Unterstützung für CSS-Variablen, Mixins und Module in Browsern bietet. Die Frage ist jedoch, dass dies eine gute Sache ist?
Bevor wir fortschreiten, bedenken Sie, dass sich diese Entwicklungen noch im experimentellen Stadium befinden. Sie wurden bisher noch nicht in einem Browser implementiert.
Wenn Sie mit CSS-Präprozessoren, wie Less oder SASS, einigermaßen vertraut sind, haben Sie grundlegende Kenntnisse darüber, was Sie von diesen Ergänzungen erwarten können. (Allerdings ist die vorgeschlagene Syntax leider etwas anders.) In Zukunft können Sie Variablen (global und lokal) und Mixins erstellen, die Sie sich als eine Sammlung von Stilen vorstellen können, die leicht sein können referenziert.
So lange ich mich erinnern kann, hat die Community nach CSS-Variablen gesucht. was war also der halter? Mit einem Wort: Uneinigkeit. Tatsächlich spielte das Webkit im Jahr 2008 mit dieser Funktion - sogar bis zur Einführung in die Nachttiere -, jedoch kam der Vorschlag nicht lange nach. Viele haben das Gefühl, dass CSS zu mehr wird Programmierer wie Sprache würde nur Frustration bringen; Einige meinten sogar, es könnte Designer verwirren. Wenn die Primärfarbe in Ihrem Projekt beispielsweise in einer Variablen gespeichert ist - vermutlich am oberen Rand Ihres Stylesheets -, müsste der Designer dann auf zwei Positionen verweisen.
@myColor: rot;
/ * Weniger Syntax * / #someElem color: @myColor;
Obwohl dieses Argument in gewissem Umfang gültig ist, hat es nicht viel Gewicht. Die meisten Designer pflegen eine Reihe von Site-Farben am oberen Rand ihres Stylesheets, das sie als Referenz verwenden. Die Einführung von Variablen zur Aufnahme dieser Werte ist eine logische Lösung.
Weniger oder SASS-Fans werden es gewohnt sein, Variablen wie folgt zu definieren:
/ * Weniger * / @primary_color: rot; / * SASS * / $ primary_color: rot;
Die vorgeschlagene Syntax macht die Sache etwas komplizierter, indem Variablen typisiert werden. Zum Beispiel:
/ * Deklaration * / @var Primärfarbenfarbe Rot; / * Usage * / body color: var (primary_color);
Accentsconagua
@var Farbe Schlüsselwort im obigen Code. var Funktion und übergeben Sie den Variablennamen. Ich muss zugeben: Es scheint ein bisschen überflüssig zu sein, das zu benutzen @var Richtlinie. Die von SASS und Less verwendete Syntax scheint angemessener und sauberer zu sein. @ myVar ist knapper als @ var myVar.
Variablentypen sind dagegen eine willkommene Ergänzung.
Variablen werden eingegeben. Es gibt jeden primitiven Werttyp, jede Eigenschaft und einige zusätzliche Komforttypen. Auf diese Weise können wir die neuen CSSOM-Inhalte darauf zeigen:
document.styleSheets [0] .vars ['primary_color']. alpha = .5;
-- xanthir.com
Variablen können auch über ein Deklarationsfeld in ein Deklarationsfeld eingebunden werden @lokal Richtlinie. Dies kann nützlich sein, wenn eine Variable innerhalb eines Projekts nur ein- oder zweimal verwendet werden muss.
.box / * Deklaration * / @local box_gradient Hintergrund linearer Farbverlauf (oben, schwarz, weiß); / * Usage * / background: var (box_gradient);
Mix-Ins können unglaublich hilfreich sein. Tatsächlich haben wir uns vor kurzem mit Nettuts + befasst, wie Sie eine Klassendatei mit Mix-Ins erstellen. Sie können dies hier lesen - bedenken Sie jedoch, dass die in diesem Artikel vorgestellten Techniken auf dem Less-Präprozessor basieren. Die neuen Experimente verwenden wiederum eine etwas andere Syntax.
/ * Weniger * / .border-radius (@radius: 3px) -webkit-border-radius: @radius; -moz-border-radius: @radius; Grenzradius: @radius; / * SASS * / @mixin border-radius ($ radius: 3px) -webkit-border-radius: $ radius; -moz-border-radius: $ radius; Grenzradius: $ Radius; / * Und möglicherweise die native Lösung? * / @mixin border-radius (Radiuslänge 3px) -webkit-border-radius: var (radius); -moz-border-radius: var (radius); Grenzradius: var (Radius);
Beachten Sie die Ähnlichkeiten zwischen SASS und der vorgeschlagenen nativen Lösung für Mixins. Dies ist darauf zurückzuführen, dass Mitglieder des SASS-Teams als Berater tätig sind.
Wie Sie vielleicht wissen, erlauben Ihnen Less und SASS das Nest Selektoren. Dies kann die Größe Ihrer Stylesheets drastisch reduzieren, da derselbe Selektor nicht mehr wiederholt werden muss.
/ * Der aktuelle Weg * / #content … #content p … #content pa … #content pa: hover … / * Weniger und SASS * / #content … p … a … & : hover … / * Und nativ? * / #content … @this> p … @this> a … @this: hover …
Während die vorgeschlagene Syntax mehr ist wortreich, Es gibt jedoch eine schöne OO-artige Syntax, durch die sich viele Entwickler wie zu Hause fühlen.
Aber denken Sie daran - nicht alle Designer sind Entwickler.
Standardmäßig sind in Less alle Variablen - für alle Absichten und Zwecke - global. Daher wird es schwierig, Code zu verteilen, da vorhandene Variablennamen überschrieben werden können. Die potentielle native Lösung wird darin bestehen, Module oder Namespaces zu implementieren. Sie können dann sein inbegriffen in einem Block durch Hinzufügen von @benutzen Richtlinie.
@module Site @var primary_color color # 292929; @var-Sekundärfarbefarbe blau; @mixin border-radius (Radiuslänge 3px) … border-radius: 3px; / * Falsche Verwendung * / body color: var (primary_color); // Variablenname ist undefiniert / * Correct * / body @use Site; color: var (primary_color); // # 292929 (Works)
Wie bereits zu Beginn dieses Artikels erwähnt, befindet sich die oben aufgelistete Dokumentation noch im experimentellen Stadium. Es ist möglich - wahrscheinlich sogar -, dass sich die Syntax ändern wird Ihre Feedback. Also lass es uns haben. Begeistert dich die Vorstellung von nativen Variablen in Mixins in deinem CSS… oder macht dir Angst?
Mir? Nun, ich bin dafür. Ich denke, die vorgeschlagene Syntax könnte ein bisschen Arbeit erfordern, da sie die Designer unter uns zweifellos verjagen wird. Wenn die Syntax etwas vereinfacht wurde, bin ich 100% an Bord. Wie ist es mit Ihnen?
