Detaillierte Beschreibung der Verwendung des Stylus-CSS-Frameworks

Der unten stehende Editor liefert Ihnen eine detaillierte Beschreibung zur Verwendung des Stylus-CSSFrameworks. Der Editor findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz

Stylus ist eine CSS-Sprache, die kompiliert werden muss, sodass ihre eigenen Dateien nicht direkt von HTML aufgerufen werden können müssen in CSS-Dateien kompiliert werden und dann täglich geladen werden.

Stylus ist eine hervorragende CSS-Kompilierungssprache, die die Unterstützung von node.js erfordert. Der erste Schritt besteht darin, node.js zu installieren

Problem: Strg+D hat beim Windows-Debuggen keine Wirkung Beenden? So geben Sie Debugging-Code direkt unter Windows aus

Hinweis: # bedeutet, dass diese Zeile die Eingabe- und Ausführungszeile ist

Offizielle Website zum Herunterladen von NodeJS

1

tar xvf node-v0.10.28.tar.gz    
#  cd node-v0.10.28    
#  ./configure    
# make    
# make install    
# cp /usr/local/bin/node /usr/sbin/

2 Knoten - v Überprüfen Sie die Knotenversionsinformationen. Wenn Rückgabeinformationen vorliegen, ist die Installation erfolgreich

3 Stift installieren

# npm install stylus -g Hinweis: Sie müssen -g finden und die Umgebung als globale Methode konfigurieren

4 Debugging Stylus

# stylus   
border-radius()   
  -webkit-border-radius arguments   
  -moz-border-radius arguments   
  border-radius arguments   

body   
  font 12px Helvetica, Arial, sans-serif

a.button   
  border-radius(5px)

Strg eingeben +D, um das Rückgabeergebnis zu debuggen

Überprüfen Sie, ob es zurückgegeben wird

body {   
  font: 12px Helvetica, Arial, sans-serif;   
}   
a.button {   
  -webkit-border-radius: 5px;   
  -moz-border-radius: 5px;   
  border-radius: 5px;   
}

5 Zusammenstellung von Stiftdateien

Erstellen Sie einen Test .styl-Datei mit folgendem Inhalt:

border-radius()   
  -webkit-border-radius arguments   
  -moz-border-radius arguments   
  border-radius arguments   

body   
  font 12px Helvetica, Arial, sans-serif

a.button   
  border-radius 5px

Speichern und schließen Sie den folgenden Befehl in der Befehlszeile:

# stylus --compress < test.styl > test.css

Überprüfen Sie, ob Sie eine test.css-Datei erhalten und ob der Inhalt wie folgt lautet:

body{   
font:12px Helvetica,Arial,sans-serif
}   
a.button{   
-webkit-border-radius:5px;   
-moz-border-radius:5px;   
border-radius:5px
}

Eine solche Stiftdatei wird in HTML kompiliert und kann als CSS-Datei bezeichnet werden.

Anhang:

Beispiel zum Kompilieren einer Datei
Der Stift akzeptiert auch Dateien und Verzeichnisse. Beispielsweise wird ein Verzeichnis namens css eine CSS-Datei im selben Verzeichnis kompilieren und ausgeben.

$ stylus css Folgendes wird nach ./public/stylesheets ausgegeben:

$ stylus css --out public/stylesheets oder einige Dateien:

$ stylus one. styl two.styl Für Entwicklungszwecke können Sie die Option „linenos“ verwenden, um Anweisungen zum Anzeigen des Stylus-Dateinamens und der Zeilennummer im generierten CSS zu erteilen.

$ stylus --line-numbers oder firebug Option, wenn Sie die FireStylus-Erweiterung von Firebug verwenden möchten.

$ stylus --firebug CSS konvertieren
Wenn Sie CSS in eine prägnante Stylus-Syntax konvertieren möchten, können Sie das Flag --css verwenden.

Ausgabe über Standardeingabe:

$ stylus --css < test.styl Gibt die .styl-Datei mit demselben Basisnamen aus.

$ stylus --css test.css Ausgabespezifisches Ziel:

$ stylus --css test.css /tmp/out.stylCSS Hilfe für Attribut
Unter OS

$ stylus help box-shadow Interactive Shell
Stylus REPL (Read-Eval-Print-Loop) oder „Interactive Shell“ ermöglicht Ihnen das Spielen mit Styluss Ausdrücken direkt im Terminal.

Beachten Sie, dass nur Ausdrücke wirksam werden können, keine Selektoren und dergleichen. Der Einfachheit halber fügen wir das Flag -i oder --interactive hinzu:

$ stylus -i
> color = white
=> , 50,0)
=> #37cdff
> color
=>
> Erklären Sie die CLI-Verwendung.

Angenommen, wir haben den folgenden Stift, der die Spitze importiert und die linear-gradient()-Methode der Spitze verwendet:

@import 'nib'

body

Hintergrund

: linear-gradient(20px top, white, black) Das erste, was wir über die Standardeingabe und -ausgabe mit stylus(1) zu rendern versuchen, könnte so aussehen:

$ stylus < ; styl Dies kann zu Fehlern wie den folgenden führen, da Stylus nicht weiß, wo die Feder zu finden ist.

Fehler: stdin:3
2|. nib' 4|. 5|. body

6|. Für die einfache Anwendung von Stylus

API

können wir hinzufügen Suchpfad. Durch die Verwendung von --

include
oder dem Flag -I:

$ stylus < test.styl --include ../nib/lib generiert nun den folgenden Inhalt. Möglicherweise ist Ihnen aufgefallen, dass „gradient-data-uri()“ und „create-gradient-image()“ in wörtlicher Form ausgegeben werden. Dies liegt daran, dass es nicht ausreicht, den Pfad des Plug-ins offenzulegen, wenn das Plug-in die
JavaScript
-API bereitstellt. Wenn wir jedoch nur die reine Stylus-Spitzenfunktion
wollen, reicht das aus.

因此，我们需要做的是使用--use或-u标志。其会找寻node模块（有或者没有.js扩展名）路径，这里的require()模块或调用style.use(fn())来暴露该插件（定义js函数等）。

$ stylus < test.styl --use ../nib/lib/nib生成为：

body {   
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAUCAYAAABMDlehAAAABmJLR0QA/wD/AP+gvaeTAAAAI0lEQVQImWP4+fPnf6bPnz8zMH358oUBwkIjKJBgYGNj+w8Aphk4blt0EcMAAAAASUVORK5CYII=");   
  background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0, #fff), color-stop(1, #000));   
  background: -webkit-linear-gradient(top, #fff 0%, #000 100%);   
  background: -moz-linear-gradient(top, #fff 0%, #000 100%);   
  background: linear-gradient(top, #fff 0%, #000 100%);   
}

nodemon 插件

# npm install nodemon -g

var css = require("stylus"),    
    str = require("fs").readFileSync("style.styl", "utf8");   

css.render(str, { filename: "stylus.styl" }, function(err, css) {   
    if (err) throw err;   
    var http = require('http');   
    http.createServer(function (req, res) {   
        res.writeHead(200, {'Content-Type': 'text/css'});   
        res.end(css);   
    }).listen(1337, '127.0.0.1');   
    console.log('已经启动 http://www.php.cn/:1337/');   
});

以上这篇stylus css 框架使用方法深入解析就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。

Das obige ist der detaillierte Inhalt vonDetaillierte Beschreibung der Verwendung des Stylus-CSS-Frameworks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!