Stylus CSS Framework use method detailed description

The following small series for everyone to bring a stylus CSS framework use of detailed instructions. Small series feel very good, and now share to everyone, also for everyone to make a reference

Stylus is a CSS language that needs to be compiled, so its own file cannot be called directly by HTML, it needs to be compiled into a CSS file before the daily loading.

Stylus is an excellent CSS compiler language that requires node. JS support, and the first step is to install node. js

Problem: Windows debugging Ctrl+d No effect CTRL + C exit? How to output debug code directly under Windows

Note: # Indicates that the bank is the input carriage return run line

Official website Download 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 NODE-V View node version information if there is a return message, the installation succeeds

3 Installing Stylus

# NPM Install stylus-g Note: You must find the-G simultaneous configuration environment as a global method

4 Commissioning Stylus

# stylus   Border-radius ()     -webkit-border-radius arguments     -moz-border-radius arguments     Border-radius arguments   body     font 12px Helvetica, Arial, Sans-serifa.button     Border-radius (5px)

Input Ctrl+d Debug return results

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 files

Create a Test.styl file with the following file contents:

Border-radius ()     -webkit-border-radius arguments     -moz-border-radius arguments     Border-radius Arguments   body     font 12px Helvetica, Arial, Sans-serifa.button     Border-radius 5px

Save close and run the following command at the command line:

# Stylus--compress < test.styl > Test.css

See if you get a test.css file and 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 is compiled into a CSS file that can be called by HTML.

Appendix:

Example of compiling files
Stylus also accepts documents and directories. For example, a directory named CSS will compile and output a. css file in the same directory.

$ stylus CSS below 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 emit instructions to display the stylus file name and the number of rows in the generated CSS.

$ stylus--line-numbers <path> or Firebug option if you want to use Firebug firestylus extension.

$ stylus--firebug <path> Convert CSS
If you want to convert CSS into a concise stylus syntax, you can use the--CSS flag.

With standard input and output:

$ stylus--CSS < TEST.CSS > Test.styl output A. styl file with the same basic name.

$ stylus--CSS TEST.CSS output a specific target:

$ stylus--CSS TEST.CSS/TMP/OUT.STYLCSS Property Help
On OS X, Stylus help <prop> opens your default browser and displays a helpful document for the given <prop> properties.

$ stylus Help Box-shadow shell layer interaction (Interactive shell)
Stylus REPL (read-eval-print-loop) or shell interaction (Interactive shell) allows you to play the Stylus expression directly on the terminal.

Note that only expressions can take effect, not selectors. 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 plugins
In this example we will use the Nibstylus plugin to illustrate its CLI usage.

Suppose we have the following stylus, which imports the nib and uses the Linear-gradient () method of the NIB:

@import ' nib '

Body
Background:linear-gradient (20px top, white, black) we are using the stylus (1) To try to render the first thing through the standard input output may look like this:

$ stylus < Test.styl This may generate the following error, because Stylus does not 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 applications Stylus API plugins, we can add a find path. By using the--include or-I flag:

$ stylus < Test.styl--include. /nib/lib now generates content as follows. You may notice that Gradient-data-uri () and create-gradient-image () are output in literal form. This is because when the plugin provides the JavaScript API, the light exposes the path of the plugin is not enough. However, if we only want to be purely stylus nib function, then 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%);   }

So what we need to do is use the--use or-u flag. It will look for the node module (with or without the. js extension) path, where the Require () module or call Style.use (FN ()) to expose the plugin (define JS function, etc.).

$ stylus < Test.styl--use. The/nib/lib/nib is generated as:

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 Plug-in

# 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 ($, {' Content-type ': ' Text/css '});           Res.end (CSS);       }). Listen (1337, ' 127.0.0.1 ');       Console.log (' already started http://www.php.cn/:1337/');   });

Above this article Stylus CSS framework uses the method in-depth analysis is the small part to share to everybody's whole content, hoped can give everybody a reference, also hoped that everybody many support topic.alibabacloud.com.