How to use the STYLUS--CSS framework

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

1

    # apt-get update      install-y python-software-properties software-properties-Common      # Add-apt-repository ppa:chris-lea/node. js      # apt-get update           

2 NODE-V View node version information if there is a return message, the installation succeeds

3 Installing Stylus

Install Stylus

4 Commissioning Stylus (CTRL+D)

# Styus
border-radius()  -webkit-border-radiusarguments  -moz-border-radius arguments  Border-radius arguments  body  font 12px Helvetica, Arial, sans-serif  A.button  Border-radius (5px)

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:

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.button Ten   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:

1 Body {2font:12px helvetica,arial,sans-serif3 } 4 A.button {5-webkit-border-radius:5px; 6 -moz-border-radius:5px; 7 Border-radius:5px8 }

Such a stylus file is compiled into a CSS file that can be called by HTML.

Appendix:

Example of compiling files

stylusFiles and directories are also accepted. For example, a directory name css will compile and output files in the same directory .css .

$ stylus CSS

The following will be output to ./public/stylesheets :

$ stylus CSS--out public/stylesheets

or some files:

$ Stylus One.styl Two.styl

For the purposes of development, you can use the linenos option issuing 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's firestylus extension.

$ Stylus--firebug <path>

Convert CSS

If you want to convert the CSS into a concise stylus syntax, you can use the --css flags.

With standard input and output:

$ stylus--CSS < TEST.CSS > Test.styl

Output a file with the same basic name .styl .

$ Stylus--CSS TEST.CSS

To output a specific target:

$ Stylus--CSS Test.css/tmp/out.styl

Help for CSS Properties

On OS X, the stylus help <prop> Help document opens your default browser and displays the given <prop> properties.

$ stylus Help Box-shadow

Shell 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 -i or --interactive mark:

$ 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 nib linear-gradient() method:

@import ' nib ' body  

stylus(1)The first thing we tried to render with standard input output might 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 application Stylus API's plugin, we can add find path. By using --include or -I marking:

$ stylus < Test.styl--include. /nib/lib

Now the generated content is as follows. You may have noticed, gradient-data-uri() as well as the create-gradient-image() 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 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%);}

So what we need to do is use --use or -u sign. 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. /nib/lib/nib

Generated as:

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%);}