Heim Web-Frontend HTML-Tutorial styluscss 框架使用方法_html/css_WEB-ITnose

styluscss 框架使用方法_html/css_WEB-ITnose

Jun 24, 2016 pm 12:00 PM
使用方法 框架

  Stylus是一款需要编译的css语言,所以其本身文件不能被html直接调用,需要要编译为css文件后再进行日常的加载。

stylus是一款优秀的css编译语言,需要node.js支持,第一步需要安装node.js

    # 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 
Nach dem Login kopieren

2 node - v 查看node版本信息如果有返回信息则安装成功

3 安装stylus

# npm install stylus
Nach dem Login kopieren

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)
Nach dem Login kopieren

看看是否会返回

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

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
Nach dem Login kopieren

保存关闭,在命令行运行如下命令:

# stylus --compress < test.styl > test.css
Nach dem Login kopieren

看看是不是获得一个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 }
Nach dem Login kopieren

这样一个stylus的文件就被编译成了html可以调用的css文件了。

附录:

编译文件范例

stylus亦接受文件和目录。例如,一个目录名为css将在同一目录编译并输出.css文件。

$ stylus css
Nach dem Login kopieren

下面的将会输出到./public/stylesheets:

$ stylus css --out public/stylesheets
Nach dem Login kopieren

或一些文件:

$ stylus one.styl two.styl
Nach dem Login kopieren

为了开发的目的,你可以使用linenos选项发出指令在生成的CSS中显示Stylus文件名以及行数。

$ stylus --line-numbers <path>
Nach dem Login kopieren

或是firebug选项,如果你想使用firebug的FireStylus扩展。

$ stylus --firebug <path>
Nach dem Login kopieren
转换CSS

如果你想把CSS转换成简洁的Stylus语法,可以使用--css标志。

通过标准输入输出:

$ stylus --css < test.css > test.styl
Nach dem Login kopieren

输出基本名一致的.styl文件。

$ stylus --css test.css
Nach dem Login kopieren

输出特定的目标:

$ stylus --css test.css /tmp/out.styl
Nach dem Login kopieren
CSS属性的帮助

在OS X上,stylus help 会打开你默认浏览器并显示给定的属性的帮助文档。

$ stylus help box-shadow
Nach dem Login kopieren
壳层交互(Interactive Shell)

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)
Nach dem Login kopieren
利用插件

本例我们将使用nibStylus插件来说明它的CLI使用。

假设我们有如下的Stylus, 其导入nib并使用nib的linear-gradient()方法:

@import 'nib'body  background: linear-gradient(20px top, white, black) 
Nach dem Login kopieren

我们是使用stylus(1)通过标准输入输出试图渲染的第一个东西可能就像下面这样:

$ stylus < test.styl
Nach dem Login kopieren

这可能会生成如下的错误,因为Stylus不知道去哪里找到nib.

Error: stdin:3    1|     2|   > 3| @import 'nib'    4|     5| body    6|   background: linear-gradient(20px top, white, black)
Nach dem Login kopieren

对于简单应用Stylus API们的插件,我们可以添加查找路径。通过使用--include或-I标志:

$ stylus < test.styl --include ../nib/lib
Nach dem Login kopieren

现在生成内容如下。您可能注意到了,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%);}
Nach dem Login kopieren

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

$ stylus < test.styl --use ../nib/lib/nib
Nach dem Login kopieren

生成为:

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%);}
Nach dem Login kopieren

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So bewerten Sie die Kosteneffizienz der kommerziellen Unterstützung für Java-Frameworks So bewerten Sie die Kosteneffizienz der kommerziellen Unterstützung für Java-Frameworks Jun 05, 2024 pm 05:25 PM

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.

Wie wirken sich die Lightweight-Optionen von PHP-Frameworks auf die Anwendungsleistung aus? Wie wirken sich die Lightweight-Optionen von PHP-Frameworks auf die Anwendungsleistung aus? Jun 06, 2024 am 10:53 AM

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

Best Practices für die Dokumentation des Golang-Frameworks Best Practices für die Dokumentation des Golang-Frameworks Jun 04, 2024 pm 05:00 PM

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.

So wählen Sie das beste Golang-Framework für verschiedene Anwendungsszenarien aus So wählen Sie das beste Golang-Framework für verschiedene Anwendungsszenarien aus Jun 05, 2024 pm 04:05 PM

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.

Wie ist die Lernkurve von PHP-Frameworks im Vergleich zu anderen Sprach-Frameworks? Wie ist die Lernkurve von PHP-Frameworks im Vergleich zu anderen Sprach-Frameworks? Jun 06, 2024 pm 12:41 PM

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.

Leistungsvergleich von Java-Frameworks Leistungsvergleich von Java-Frameworks Jun 04, 2024 pm 03:56 PM

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.

Detaillierte praktische Erklärung der Golang-Framework-Entwicklung: Fragen und Antworten Detaillierte praktische Erklärung der Golang-Framework-Entwicklung: Fragen und Antworten Jun 06, 2024 am 10:57 AM

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.

Leistungsvergleich des Golang-Frameworks: Metriken für kluge Entscheidungen Leistungsvergleich des Golang-Frameworks: Metriken für kluge Entscheidungen Jun 05, 2024 pm 10:02 PM

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.

See all articles