styluscss 框架使用方法_html/css_WEB-ITnose
Stylus是一款需要编译的css语言,所以其本身文件不能被html直接调用,需要要编译为css文件后再进行日常的加载。
stylus是一款优秀的css编译语言,需要node.js支持,第一步需要安装node.js
1
# apt-get update # apt-get install -y python-software-properties software-properties-common # add-apt-repository ppa:chris-lea/node.js # apt-get update # apt-get install nodejs
2 node - v 查看node版本信息如果有返回信息则安装成功
3 安装stylus
# npm install stylus
4 调试Stylus (Ctrl+D)
# styusborder-radius() -webkit-border-radius arguments -moz-border-radius arguments border-radius arguments body font 12px Helvetica, Arial, sans-serif a.button border-radius(5px)
看看是否会返回
body { font: 12px Helvetica, Arial, sans-serif;}a.button { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
5 styus文件的编译
创建一个test.styl 的文件,文件内容如下:
1 border-radius() 2 -webkit-border-radius arguments 3 -moz-border-radius arguments 4 border-radius arguments 5 6 body 7 font 12px Helvetica, Arial, sans-serif 8 9 a.button10 border-radius 5px
保存关闭,在命令行运行如下命令:
# stylus --compress < test.styl > test.css
看看是不是获得一个test.css的文件,看看内容是否如下:
1 body{2 font:12px Helvetica,Arial,sans-serif3 }4 a.button{5 -webkit-border-radius:5px;6 -moz-border-radius:5px;7 border-radius:5px8 }
这样一个stylus的文件就被编译成了html可以调用的css文件了。
附录:
编译文件范例stylus亦接受文件和目录。例如,一个目录名为css将在同一目录编译并输出.css文件。
$ stylus css
下面的将会输出到./public/stylesheets:
$ stylus css --out public/stylesheets
或一些文件:
$ stylus one.styl two.styl
为了开发的目的,你可以使用linenos选项发出指令在生成的CSS中显示Stylus文件名以及行数。
$ stylus --line-numbers <path>
或是firebug选项,如果你想使用firebug的FireStylus扩展。
$ stylus --firebug <path>
如果你想把CSS转换成简洁的Stylus语法,可以使用--css标志。
通过标准输入输出:
$ stylus --css < test.css > test.styl
输出基本名一致的.styl文件。
$ stylus --css test.css
输出特定的目标:
$ stylus --css test.css /tmp/out.styl
在OS X上,stylus help
$ stylus help box-shadow
Stylus REPL (Read-Eval-Print-Loop)或“壳层交互(Interactive Shell)”允许你直接在终端机上把玩Stylus的表达式。
注意只有表达式可以生效,而不是选择器之类。为了简单,我们添加-i或--interactive标志:
$ stylus -i> color = white=> #fff> color - rgb(200,50,0)=> #37cdff> color=> #fff> color -= rgb(200,50,0)=> #37cdff> color=> #37cdff> rgba(color, 0.5)=> rgba(55,205,255,0.5)
本例我们将使用nibStylus插件来说明它的CLI使用。
假设我们有如下的Stylus, 其导入nib并使用nib的linear-gradient()方法:
@import 'nib'body background: linear-gradient(20px top, white, black)
我们是使用stylus(1)通过标准输入输出试图渲染的第一个东西可能就像下面这样:
$ stylus < test.styl
这可能会生成如下的错误,因为Stylus不知道去哪里找到nib.
Error: stdin:3 1| 2| > 3| @import 'nib' 4| 5| body 6| background: linear-gradient(20px top, white, black)
对于简单应用Stylus API们的插件,我们可以添加查找路径。通过使用--include或-I标志:
$ stylus < test.styl --include ../nib/lib
现在生成内容如下。您可能注意到了,gradient-data-uri()以及create-gradient-image()以字面量形式输出了。这是因为,当插件提供JavaScript API的时候,光暴露插件的路径是不够的。但是,如果我们仅仅想要的是纯粹Stylus nib函数,则足够了。
body { background: url(gradient-data-uri(create-gradient-image(20px, top))); background: -webkit-gradient(linear, left top, left bottom, 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%);}
因此,我们需要做的是使用--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 bottom, 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%);}

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Die Bewertung des Kosten-/Leistungsverhältnisses des kommerziellen Supports für ein Java-Framework umfasst die folgenden Schritte: Bestimmen Sie das erforderliche Maß an Sicherheit und Service-Level-Agreement-Garantien (SLA). Die Erfahrung und das Fachwissen des Forschungsunterstützungsteams. Erwägen Sie zusätzliche Services wie Upgrades, Fehlerbehebung und Leistungsoptimierung. Wägen Sie die Kosten für die Geschäftsunterstützung gegen Risikominderung und Effizienzsteigerung ab.

Das leichte PHP-Framework verbessert die Anwendungsleistung durch geringe Größe und geringen Ressourcenverbrauch. Zu seinen Merkmalen gehören: geringe Größe, schneller Start, geringer Speicherverbrauch, verbesserte Reaktionsgeschwindigkeit und Durchsatz sowie reduzierter Ressourcenverbrauch. Praktischer Fall: SlimFramework erstellt eine REST-API, nur 500 KB, hohe Reaktionsfähigkeit und hoher Durchsatz

Das Verfassen einer klaren und umfassenden Dokumentation ist für das Golang-Framework von entscheidender Bedeutung. Zu den Best Practices gehört die Befolgung eines etablierten Dokumentationsstils, beispielsweise des Go Coding Style Guide von Google. Verwenden Sie eine klare Organisationsstruktur, einschließlich Überschriften, Unterüberschriften und Listen, und sorgen Sie für eine Navigation. Bietet umfassende und genaue Informationen, einschließlich Leitfäden für den Einstieg, API-Referenzen und Konzepte. Verwenden Sie Codebeispiele, um Konzepte und Verwendung zu veranschaulichen. Halten Sie die Dokumentation auf dem neuesten Stand, verfolgen Sie Änderungen und dokumentieren Sie neue Funktionen. Stellen Sie Support und Community-Ressourcen wie GitHub-Probleme und Foren bereit. Erstellen Sie praktische Beispiele, beispielsweise eine API-Dokumentation.

Wählen Sie das beste Go-Framework basierend auf Anwendungsszenarien aus: Berücksichtigen Sie Anwendungstyp, Sprachfunktionen, Leistungsanforderungen und Ökosystem. Gängige Go-Frameworks: Gin (Webanwendung), Echo (Webdienst), Fiber (hoher Durchsatz), gorm (ORM), fasthttp (Geschwindigkeit). Praktischer Fall: Erstellen einer REST-API (Fiber) und Interaktion mit der Datenbank (gorm). Wählen Sie ein Framework: Wählen Sie fasthttp für die Schlüsselleistung, Gin/Echo für flexible Webanwendungen und gorm für die Datenbankinteraktion.

Die Lernkurve eines PHP-Frameworks hängt von Sprachkenntnissen, Framework-Komplexität, Dokumentationsqualität und Community-Unterstützung ab. Die Lernkurve von PHP-Frameworks ist im Vergleich zu Python-Frameworks höher und im Vergleich zu Ruby-Frameworks niedriger. Im Vergleich zu Java-Frameworks haben PHP-Frameworks eine moderate Lernkurve, aber eine kürzere Einstiegszeit.

Laut Benchmarks sind Quarkus (schneller Start, geringer Speicher) oder Micronaut (TechEmpower ausgezeichnet) für kleine, leistungsstarke Anwendungen die ideale Wahl. SpringBoot eignet sich für große Full-Stack-Anwendungen, weist jedoch etwas langsamere Startzeiten und Speichernutzung auf.

Bei der Go-Framework-Entwicklung treten häufige Herausforderungen und deren Lösungen auf: Fehlerbehandlung: Verwenden Sie das Fehlerpaket für die Verwaltung und Middleware zur zentralen Fehlerbehandlung. Authentifizierung und Autorisierung: Integrieren Sie Bibliotheken von Drittanbietern und erstellen Sie benutzerdefinierte Middleware zur Überprüfung von Anmeldeinformationen. Parallelitätsverarbeitung: Verwenden Sie Goroutinen, Mutexe und Kanäle, um den Ressourcenzugriff zu steuern. Unit-Tests: Verwenden Sie Gotest-Pakete, Mocks und Stubs zur Isolierung sowie Code-Coverage-Tools, um die Angemessenheit sicherzustellen. Bereitstellung und Überwachung: Verwenden Sie Docker-Container, um Bereitstellungen zu verpacken, Datensicherungen einzurichten und Leistung und Fehler mit Protokollierungs- und Überwachungstools zu verfolgen.

Zu den wichtigsten Leistungsindikatoren (KPIs) bei der Auswahl eines Go-Frameworks gehören: Antwortzeit, Durchsatz, Parallelität und Ressourcennutzung. Durch Benchmarking und Vergleich der KPIs der Frameworks können Entwickler fundierte Entscheidungen auf der Grundlage der Anwendungsanforderungen treffen und dabei die erwartete Auslastung, leistungskritische Abschnitte und Ressourcenbeschränkungen berücksichtigen.
