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 962d090dc0d4a45a3e45fb5f2cd25154 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 98953a78f52873edae60a617ec082494 oder firebug Option, wenn Sie die FireStylus-Erweiterung von Firebug verwenden möchten.

$ stylus --firebug 98953a78f52873edae60a617ec082494 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 6b77c6ae245071584203aad280147837 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!