Detailed description of how to use stylus css framework

The editor below will bring you a detailed description of stylus cssframework. The editor thinks it is pretty good, so I will share it with you now and give it as a reference

Stylus is a css language that needs to be compiled, so its own file cannot be directly called by html and needs to be compiled into a css file. Then perform daily loading.

stylus is an excellent CSS compilation language that requires node.js support. The first step is to install node.js

Problem: ctrl+d has no effect during Windows debugging ctrl+c exits ? How to output debugging code directly under windows

Remarks: # means this line is the enter and run line

Official website download nodejs

１

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 node - v Check the node version information. If there is return information, the installation is successful

3 Install stylus

# npm install stylus -gNote: Must find -g Also configure the environment as a global method

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)

Enter Ctrl+D to debug the return result

See if it will Return

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

5 Compilation of styus file

Create a test.styl file with the following 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

Save and close, run the following command on the command line:

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

See if you get a test .css file, see if the content is as follows:

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

Such a stylus file will be compiled into a css file that can be called by html.

Appendix:

Compile file example
stylus also accepts files and directories. For example, a directory named css will compile and output a .css file in the same directory.

$ stylus css The following will be output to ./public/stylesheets:

$ stylus css --out public/stylesheets or some files:

$ stylus one. styl two.styl For development purposes, you can use the linenos option to issue instructions to display the Stylus file name and line number in the generated CSS.

$ stylus --line-numbers or the firebug option if you want to use firebug's FireStylus extension.

$ stylus --firebug Convert CSS
If you want to convert CSS into concise Stylus syntax, you can use the --css flag.

Output through standard input:

$ stylus --css < test.css > test.styl Output the .styl file with the same base name.

$ stylus --css test.css output specific target:

$ stylus --css test.css /tmp/out.stylCSSPropertiesHelp
On OS X, stylus help will open your default browser and display help documentation for the given property.

$ stylus help box-shadow Shell Interactive (Interactive Shell)
Stylus REPL (Read-Eval-Print-Loop) or "Shell Interactive (Interactive Shell)" allows You play with Stylus' Expressions directly on the terminal.

Note that only expressions can take effect, not selectors and the like. For simplicity, we add the -i or --interactive flag:

$ 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) using the plug-in
In this example we will use the nibStylus plug-in to Explain its CLI usage.

Suppose we have the following Stylus, which imports nib and uses nib's linear-gradient() method:

@import 'nib'

body
background: linear-gradient(20px top, white, black) The first thing we try to render via standard input and output using stylus(1) may look like this:

$ stylus < ; test.styl This may generate an error like the following because Stylus doesn't know where to find the nib.

Error: stdin:3
1|
2|
> 3| @ import 'nib'
4|
5| body
6| background: linear-gradient(20px top, white, black) For simple application of Stylus API's plug-ins, we can Add search path. By using --include or the -I flag:

$ stylus < test.styl --include ../nib/lib now generates the following content. You may have noticed that gradient-data-uri() and create-gradient-image() are output in literal form. This is because, when the plugin provides the JavaScript API, it is not enough to expose the path of the plugin. However, if all we want is pure Stylus nibfunction, that's enough.

body {   
  background: url(gradient-data-uri(create-gradient-image(20px, top)));   
  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%);   
}

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

The above is the detailed content of Detailed description of how to use stylus css framework. For more information, please follow other related articles on the PHP Chinese website!