Description détaillée de l'utilisation du framework CSS Stylus

L'éditeur ci-dessous vous apportera une description détaillée de la façon d'utiliser le framework stylus cssframe. L'éditeur pense que c'est plutôt bien, alors je vais le partager avec vous maintenant et le donner comme référence

Stylus est un langage CSS qui doit être compilé, donc ses propres fichiers ne peuvent pas être directement appelés par html et doivent être compilés dans des fichiers CSS. Ensuite, effectuez un chargement quotidien.

stylus est un excellent langage de compilation CSS qui nécessite le support de node.js. La première étape consiste à installer node.js

Problème : ctrl d n'a aucun effet lors du débogage de Windows et ctrl c se termine ? Comment ? Afficher le code de débogage directement sous Windows

Remarque : # signifie que cette ligne est la ligne d'entrée et d'exécution

Téléchargement du site Web officiel 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 nœuds - v Afficher les informations sur la version du nœud. S'il y a des informations de retour, l'installation est réussie

3 Stylet d'installation

# npm install stylus -g Remarque : doit être trouvé -g Configurez également l'environnement en tant que méthode globale

4 Stylet de débogage

# 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)

Entrez Ctrl D pour déboguer le return result

Voir si Will return

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

5 Compilation de fichiers styus

Créer un fichier test.styl avec ce qui suit content :

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

Enregistrez et fermez, exécutez la commande suivante sur la ligne de commande :

# stylus --compress < ; test.css

Jetez un oeil Obtenez un fichier test.css et voyez si le contenu est le suivant :

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

Un tel fichier stylet sera compilé dans un fichier CSS qui peut être appelé par HTML.

Annexe :

Exemple de fichier de compilation
le stylet accepte également les fichiers et répertoires. Par exemple, un répertoire nommé css compilera et générera un fichier .css dans le même répertoire.

$ stylus css Les éléments suivants seront affichés dans ./public/stylesheets :

$ stylus css --out public/stylesheets ou certains fichiers :

$ stylus one. styl two.styl À des fins de développement, vous pouvez utiliser l'option linenos pour émettre des instructions permettant d'afficher le nom du fichier Stylus et le numéro de ligne dans le CSS généré.

$ stylus --line-numbers ou firebug si vous souhaitez utiliser l'extension FireStylus de Firebug.

$ stylus --firebug Convertir CSS
Si vous souhaitez convertir CSS en syntaxe concise de Stylus, vous pouvez utiliser l'indicateur --css.

Sortie via l'entrée standard :

$ stylus --css < test.css > test.styl Affiche le fichier .styl avec le même nom de base.

$ stylus --css test.css Cible spécifique de sortie :

$ stylus --css test.css /tmp/out.stylCSS Aide pour l'attribut
Sous OS X, l'aide du stylet ouvrira votre navigateur par défaut et affichera la documentation d'aide pour la propriété

$ stylus help box-shadow Interactive Shell
Stylus REPL (Read-Eval-Print-Loop) ou "Interactive Shell" vous permet de jouer avec les expressions<🎜 de Stylus > directement dans le terminal.

Notez que seules les expressions peuvent prendre effet, pas les sélecteurs et autres. Pour plus de simplicité, nous ajoutons le drapeau -i ou --interactive :

$ stylus -i

> color = white
=> #fff
> , 50,0)
=> #37cdff
> color
=>
>

Supposons que nous ayons le stylet suivant, qui importe nib et utilise la méthode Linear-gradient() de nib :

@import 'nib'

body

background

 : Linear-gradient(20px top, white, black) La première chose que nous essayons de restituer via l'entrée et la sortie standard à l'aide de stylus(1) pourrait ressembler à ceci :

$ stylus < ; styl Cela peut générer des erreurs comme celle-ci car Stylus ne sait pas où trouver nib.

Erreur : stdin:3
1| > nib'

4|

5| body

6| background: Linear-gradient(20px top, white, black) Pour une application simple des plug-ins de Stylus

API
peut ajouter un chemin de recherche. En utilisant --
include
ou l'indicateur -I :

$ stylus < test.styl --include ../nib/lib génère désormais le contenu suivant. Vous avez peut-être remarqué que gradient-data-uri() et create-gradient-image() sont affichés sous forme littérale. En effet, lorsque le plug-in fournit l'API
JavaScript, il ne suffit pas d'exposer le chemin du plug-in. Cependant, si tout ce que nous voulons, c'est une pure fonction styletfonction, cela suffit.

因此，我们需要做的是使用--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中文网。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!