Griffel ist ein Code-Vorprozessor CSSDies ermöglicht es uns, einfacher in unserem Texteditor zu arbeiten, und dann erkläre ich die Gründe für meine Aussage.
Dies ist ein Stylesheet, wie wir es kennen:
Körper {Schriftart: 12px Helvetica, Arial, serifenlos; } a.button {-webkit-border-radius: 5px; -Moz-Rand-Radius: 5px; Randradius: 5px; }}
Und dies wäre das gleiche Stylesheet, mit dem erstellt wurde Stift:
Körperschrift 12px Helvetica, Arial, serifenlos a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
Wo sind die Schlüssel? Wohin gingen die Semikolons, der Doppelpunkt? Vergessene, Griffel macht das für uns.
Wenn Sie mit beginnen CSS y HTML Es wird nicht empfohlen, zu verwenden Griffel für die einfache Tatsache, dass Sie vergessen können, wie die Dinge wirklich funktionieren, aber wenn Sie bereits Zeit in dieser Welt haben und sich Code und Arbeit sparen möchten, fahren Sie fort.
Programmierer Python wird in finden Griffel etwas sehr Ähnliches wie das, woran sie angepasst sind, da Sie nur richtig einrücken müssen, damit die Magie ausgeführt werden kann.
Ãœbliche Installationen
Für Griffel Arbeit müssen wir installieren Node.js Das ist in der Community-Branche, also machen wir weiter:
$ sudo pacman -S nodejs
Und später installieren wir Stylus. Der traditionelle Weg wäre:
$ npm install -g stylus
Es lässt sich gut installieren, funktioniert aber bei mir nicht. Daher ist die Installation über AUR viel einfacher:
$ yaourt -S nodejs-stylus
Verwendung des Stifts
Ok, wir haben bereits installiert Node.js und wir haben installiert Griffel.. Wie benutzen wir es? Es ist einfach. Angenommen, wir haben ein Verzeichnis mit den folgenden Dateien:
- dir - index.html - style.css
Was wir tun müssen, ist die Datei zu erstellen style.stil, an dem wir arbeiten werden. In dieser Datei können wir so etwas haben wie:
Körper Hintergrundfarbe #ffff Schriftgröße 12px a.knopffarbe rot Polsterung 10px
Wenn wir speichern oder Änderungen vornehmen, geschieht nichts, da wir unsere Datei nicht "kompilieren". Um es zu kompilieren, öffnen wir ein Terminal in unserem Verzeichnis (wo sich die Datei befindet style.stil) und wir führen aus:
stylus -c style.styl
Aber jedes Mal, wenn wir die Datei speichern style.stil wir müssten den Code ausführen, aber zum Glück ist es nicht notwendig, da wir den gleichen Befehl ausführen, aber den Parameter hinzufügen -w (beobachten) Folgendes passiert:
stylus -c -w style.styl beobachten /usr/lib/node_modules/stylus/lib/functions/index.styl kompiliert style.css beobachten style.styl kompiliert style.css kompiliert style.css
Mit anderen Worten, die Datei wird automatisch kompiliert. Wäre das Ergebnis?
body {Hintergrundfarbe: #fff; Schriftgröße: 12px} a.button {Farbe: # f00; Polsterung: 10px}
Wie Sie sehen, schafft uns nicht nur unser Code CSS, aber es eliminiert unnötige Leerzeichen, sodass unser Stylesheet weniger wiegt 
Nicht nur das, Griffel Es ermöglicht uns, CSS-Dateien in ihr Format zu übergeben, und die Art und Weise, wie wir ihre Syntax verwenden können, ist sehr unterschiedlich. Und das ist nur eine Vorschau. Deshalb ermutige ich Sie, wenn Sie interessiert sind, etwas mehr darüber zu wissen Griffel