Stift kennenlernen

Wenn Sie ein Front-End-Entwickler sind, haben Sie vielleicht von Stylus gehört, einem entfernten Verwandten von Sass, wenig bekannt. Wie Sass ist auch Stylus ein CSS -Präprozessor, der in Node.js. Nach seiner GitHub -Code -Basis nennt es sich selbst:

[…] Eine revolutionäre neue Sprache, die eine effiziente, dynamische und ausdrucksstarke Möglichkeit bietet, CSS zu erzeugen.

Nun, "revolutionär" kann etwas übertrieben sein. Aber alles andere ist wahr.

Schlüsselpunkte

• Stylus ist ein CSS -Präprozessor, der in Node.js geschrieben wurde, mit einer lockeren Syntax als ähnliche Tools wie SASS. Es ermöglicht optionale Klammern, Kolons und Semikolons und unterstützt die Einverständnis -Syntax und die regulären CSS -Stile.
• Stylus unterstützt die Verwendung von Variablen, Funktionen und Mischungen, um CSS einer echten Programmiersprache näher zu bringen. Es hat auch eine Attributwert -Suchfunktion und kann die Ausgabeattribute bedingt auf der Grundlage des Defats des Attributs bedingt bedingt ausgeben.
• Während Stift sehr flexibel ist, erfordert die Verwendung von Stylus die Einhaltung der Syntaxregeln, um Verwirrung zu vermeiden. Es kann mit Node.js und NPM installiert und mit dem Befehl stylus in CSS kompiliert werden. Stylus hat auch einen eigenen Rahmen, NIB, der zusätzliche Helfer und Cross-Browser-Unterstützung für Mixin bietet.

Was, noch ein? !

Ein bisschen wie es. Aber Stift ist keine ganz neue Sache. Es gibt es seit Anfang 2011, aber ich denke, es hat eine ziemlich zurückhaltende Community. Wussten Sie übrigens, dass das neueste Mozilla Developer -Netzwerkrede mit Stylus durchgeführt wurde? David Walsh, der an dem Projekt beteiligt war, schrieb auch darüber, wie man mit Stylus beginnt.

Was sind die Vorteile von Stylus im Vergleich zu SASS? Nun, es ist mit Node.js gebaut, was meiner Meinung nach ein Vorteil ist. Es ist zwar völlig in Ordnung, SASS in einem Knoten-Workflow aufgrund der Knoten-Sass-LiBsass-Wrapper zu verwenden, aber dies bedeutet nicht, dass LiBsass vollständig im Knoten geschrieben ist.

Darüber hinaus verfügt Stylus über eine extrem lose Syntax, die je nach Projekt, Team und Ihrer Tendenz, sich an strenge Codierungsnormen zu halten, gut oder schlecht sein kann. Ich denke, solange Sie nicht zu viel Logik in das Stylesheet aufnehmen und die Codeprüfung durchführen, bevor Sie den Code senden, sollte die lose Syntax in Ordnung sein.

Insgesamt unterstützt sowohl Stylus als auch SASS fast die gleichen Funktionen; Stylus unterstützt auch mehrere Syntaxe, obwohl die Grenzen sehr verschwommen sind als SASS: Sie können fast so stylen, wie Sie es wollen (Eingeweihung, CSS -Stil) und im selben Stylesheet gemischt und angepasst werden können (dieser Parser muss sehr interessant).

Was denkst du? Willst du es versuchen?

Anfänger

Wie erwähnt, ist Stylus in node.js geschrieben, sodass wir es wie jedes andere NPM -Paket installieren können:

<code>$ npm install stylus -g</code>

Von dort aus können Sie ihn mit der JavaScript -API in Ihren Knoten -Workflow einfügen oder die Befehlszeile verwenden, um Ihr Stylesheet zu kompilieren. Der Einfachheit halber werden wir das Stylus -Befehlszeilen -Tool verwenden, aber Sie können es aus Knotenskripten, Schluck oder Grunzen machen, wie Sie möchten.

<code>stylus ./stylesheets/ --out ./public/css</code>

Der vorherige Befehl fordert Stylus an, alle Stylus -Stylesheets (.styl) aus dem Ordner Stylesheets zu kompilieren und sie im Ordner Public/CSS zu generieren. Natürlich können Sie auch Änderungen im Verzeichnis überwachen:

<code>stylus --watch ./stylesheets/ --out ./public/css</code>

Stylusstil

schreiben

Wenn Sie gerade erst anfangen zu lernen und nicht von der neuen Syntax überwältigt werden möchten, wissen Sie, dass Sie reine CSS in Ihre .styl -Datei schreiben können. Da Stylus die Standard -CSS -Syntax unterstützt, ist es völlig in Ordnung, nur CSS -Code zu verwenden und ihn dann langsam zu verbessern.

grundlegende Syntax

Über die Grammatik selbst ist fast alles optional. Zahnspangen: Warum sich die Mühe machen? Semikolon: Vergiss es! Colon: Wirf es auch weg. Klammern: Bitte. Hier ist der vollständig gültige Stiftcode:

<code>.foo
.bar
  color tomato
  background deepskyblue</code>

Es ist zunächst ein wenig beunruhigend, aber wir können uns daran gewöhnen, insbesondere wenn es Syntax hervorhebt. Wie Sie vielleicht vermutet haben, kompiliert der vorherige Code:

<code>.foo, .bar {
  color: tomato;
  background: deepskyblue;
}</code>

variable

Die häufigste Funktion eines CSS -Präprozessors muss die Fähigkeit sein, Variablen zu definieren. Es ist nicht überraschend, dass Stylus es auch anbietet. Obwohl sie im Gegensatz zu Sass sind, werden sie mit gleichem Zeichen (=) anstelle von Colon (:) deklariert. Darüber hinaus ist das führende Dollarschild ($) optional und kann sicher weggelassen werden.

<code>// 定义 `text-font-stack` 变量
text-font-stack = 'Helvetica', 'Arial', sans-serif;

// 将其用作 `font` 属性的一部分
body
  font 125% / 1.5 text-font-stack</code>

Stylus macht jetzt etwas, was Sass oder ein anderer Präprozessor: Eigenschaftswertsuche macht. Angenommen, Sie möchten einen negativen linken Rand in Höhe der Hälfte der Breite anwenden.

<code>.foo
  width 400px
  position absolute
  left 50%
  margin-left (@width / 2)</code>

Mit @Width sagen wir Stylus, dass er den Wert des Breitenattributs des aktuellen Blocks erhalten und ihn als Variable behandelt. Sehr klug! Ein weiterer interessanter Anwendungsfall besteht darin, die Ausgabeattribute basierend auf der festen Definition des Attributs zu bedingten Ausgaben zu erledigen:

<code>.foo
  // ... 其他样式
  z-index: 1 unless @z-index</code>

In diesem Fall wird Z-Index auf 1 gesetzt, es sei denn, .foo hat dem Z-Index-Attribut einen Wert zugewiesen. Verwenden Sie es in Verbindung mit Mixin und Sie haben wirklich etwas.

mixin

Apropos, definieren wir einen Mixin, weil es wahrscheinlich eine der beliebtesten Merkmale von Sass ist! Ein Mixin in Stift erfordert kein bestimmtes Schlüsselwort.

<code>size(width, height = width)
  width width
  height height</code>

In ähnlicher Weise benötigt auch Mixin eine bestimmte Syntax wie @include oder so:

<code>.foo
  size(100px)</code>

Sie können sogar die Klammern entfernen, wenn Sie möchten. In diesem Fall sieht es so aus, als würden Sie eine vollständig Standard (aber nicht) CSS -Eigenschaft verwenden. Dieser Mechanismus wird als

transparentes Mixin bezeichnet, weil ihre Aufnahme unsichtbar ist.

<code>.foo
  size 100px</code>

Dies mag auf den ersten Blick wie ein unnötiger Trick aussehen, aber wenn Sie sorgfältig darüber nachdenken, kann der Autor tatsächlich die Standard -CSS -Syntax erweitern. Betrachten Sie den folgenden Überlaufmixin:

<code>$ npm install stylus -g</code>

Wenn der angegebene Wert Ellipsis ist, druckt er die bekannte Deklaration Triple, die erforderlich ist, um einen einzelnen Ellipse-Überlauf zu erhalten. Andernfalls wird der angegebene Wert gedruckt. Das Folgende ist, wie man es verwendet:

<code>stylus ./stylesheets/ --out ./public/css</code>

Es wird erzeugt:

<code>stylus --watch ./stylesheets/ --out ./public/css</code>

Sie müssen zugeben, dass dies ein sehr cooler Trick ist. Obwohl es verwirrend (und gefährlich sein kann), ist es tatsächlich ein interessantes Konzept, die Standard -CSS -Eigenschaften mit zusätzlichen Werten zu erweitern.

Wenn Sie einige Inhalte übergeben möchten, um sie auf @Content -Weise zu mischen, kann dies mit der Variablen {Block} durchgeführt werden. Während der Aufnahme müssen Sie nur vor dem Mixin -Namen hinzufügen, um zusätzliche Inhalte zu übergeben.

<code>.foo
.bar
  color tomato
  background deepskyblue</code>

Dieser Code wird als:

kompiliert

<code>.foo, .bar {
  color: tomato;
  background: deepskyblue;
}</code>

Das letzte sehr interessante Merkmal von Stylus Mixin: Sie haben immer eine Argumente, die bei der Einbeziehung an das Mixin übergeben wird (falls vorhanden). Sie können beispielsweise [..] diese Variable wie in JavaScript verwenden, um den Wert auf einen bestimmten Index zu erhalten.

endgültige Gedanken

Durch alle Funktionen und Syntax -Stifttipps wird zu ausführlich sein, und ich denke, wir hatten bereits eine gute Einführung, zumindest genug, um mit dem Lernen zu beginnen!

Wie Sie sehen, ist Stift sehr locker. Stylus ist von allen vorhandenen CSS -Schreibhilfen definitiv das engste Werkzeug, um CSS in eine echte Programmiersprache zu bringen.

Beachten Sie, dass Stylus auch ein eigenes Rahmen hat, genau wie Sass Compass, es heißt NIB. NIB ist eine Toolbox, die Stylus zusätzliche Helfer und Cross-Browser-Unterstützung für Mixin bietet.

Einige Leute mögen es mögen, manche Menschen könnten es nicht tun. Mein Rat ist, die Grammatik streng zu halten. Es ist nicht immer einfach, mit einer solchen losen Syntax umzugehen. Wie auch immer, es ist schön, einige der guten Konkurrenten von Sass zu sehen.

FAQs über Stylus (FAQs)

Was sind die Hauptunterschiede zwischen Stylus und anderen CSS -Präprozessoren?

Stylus ist eine leistungsstarke und flexible dynamische Stylesheet -Sprache. Im Gegensatz zu anderen CSS -Präprozessoren wie Sass und weniger ermöglicht Stylus die optionale Verwendung von Klammern, Kolons und Semikolonen, sodass es flexibler und weniger strenger ist. Es unterstützt auch die Einverständnis -Syntax und die regulären CSS -Stile und bietet Entwicklern beim Schreiben von Code eine größere Freiheit. Darüber hinaus unterstützt Stylus transparente Mixins, sodass Sie Mixins aufrufen können, ohne eine spezielle Syntax zu verwenden.

Wie installiere ich Stylus?

Stylus kann mit Node.js und NPM (Node Package Manager) installiert werden. Zuerst müssen Sie Node.js und NPM auf Ihrem Computer installieren. Nach Abschluss der Installation können Sie Stylus global installieren, indem Sie den Befehl npm installieren sylus -g in einer Terminal- oder Eingabeaufforderung installieren. Auf diese Weise können Sie Stylus aus jedem Verzeichnis auf Ihrem Computer verwenden.

Wie kann man Stift zu CSS kompilieren?

Nach dem Schreiben von Stylus -Code können Sie ihn mit dem Befehl stylus in der Terminal- oder Eingabeaufforderung in CSS zusammenstellen. Wenn Ihre Stylus -Datei beispielsweise Style.styl heißt, sollten Sie den Befehl Stylus -c style.styl ausführen. Dadurch wird eine CSS -Datei namens style.css im selben Verzeichnis erstellt.

Kann ich Variablen in Stylus verwenden?

Ja, Stylus unterstützt die Verwendung von Variablen. Sie können Variablen definieren, indem Sie den Namen Werte zuweisen. Zum Beispiel Schriftgröße = 14px. Sie können diese Variable an anderer Stelle in Ihrem Code verwenden, indem Sie ihren Namen wie SO verweisen: P {Schriftgröße: Schriftgröße;

Funktionen für Stylus und mischen sich?

Ja, Stylus unterstützt Funktionen und Mixin. Funktionen in Stylus werden mithilfe des DEF -Schlüsselworts definiert und können zur Durchführung von Berechnungen oder zum Betrieb von Werten verwendet werden. Andererseits ist Mixin ein wiederverwendbarer Codeblock, der in anderen Regelsätzen enthalten sein kann.

Wie kann man bedingte Aussagen in Stylus verwenden?

Stylus unterstützt bedingte Anweisungen mit dem if, sonst und sonst Schlüsselwörtern. Diese können verwendet werden, um unterschiedliche Stile auf der Grundlage bestimmter Bedingungen anzuwenden. Beispielsweise können Sie bedingte Anweisungen verwenden, um verschiedene Schriftgrößen gemäß der Bildschirmgröße anzuwenden.

Kann ich andere Stiftdateien importieren?

Ja, Stylus können Sie mit der @import -Anweisung andere Stylus -Dateien importieren. Dies ist nützlich, um den Code in separate Dateien zu organisieren und den Code in mehreren Stilblättern wiederzuverwenden.

unterstützt Stylus Schleifen?

Ja, Stylus unterstützt und während der Schleifen. Diese können verwendet werden, um doppelte CSS -Regeln oder Iterate -Listen und -Arrays zu generieren.

Kann ich Stylus mit node.js verwenden?

Ja, Stift kann mit node.js. verwendet werden. Tatsächlich basiert Stylus auf node.js und kann mit NPM (Node Package Manager) installiert werden. Sie können Stylus auch mit Express verwenden, einem beliebten Webanwendungs ​​-Framework für node.js.

Wie kann man Stiftcode debuggen?

Stylus bietet ein -Debug -Flag, mit dem Debugging -Informationen ausgegeben werden können. Dies ist hilfreich, um Fehler zu verfolgen oder zu verstehen, wie Ihr Code behandelt wird. Zusätzlich können Sie die Funktion inspect () in Stylus verwenden, um die Werte einer Variablen oder eines Ausdrucks auszugeben.

Das obige ist der detaillierte Inhalt vonStift kennenlernen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!