styluscss Framework usage_html/css_WEB-ITnose

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

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

1

    # 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 

2 node - v View node version information. If there is return information, the installation is successful

3 Install stylus

# npm install stylus

4 Debugging 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)

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

Compilation of 5 styus files

Create a test.styl file, the file content is as follows:

 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

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

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

See if it is correct Obtain a test.css file and see if the content is as follows:

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 }

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

Appendix:

Example of compiled file

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 <path>

Or the firebug option if you want to use the FireStylus extension for firebug.

$ stylus --firebug <path>

Convert CSS

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

Output via standard input:

$ stylus --css < test.css > test.styl

Output .styl files with the same base name.

$ stylus --css test.css

Output specific targets:

$ stylus --css test.css /tmp/out.styl

Help for CSS properties

On OS X, stylus help 23ac7bbddc590263b57e27da10ea2cdf will open your default browser and display the given < Help documentation for ;prop> properties.

$ stylus help box-shadow

Interactive Shell

Stylus REPL (Read-Eval-Print-Loop) or "Interactive Shell" allows you to 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)

Utilizing plugins

In this example we will use the nibStylus plugin to illustrate 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) 

We use stylus(1) to try to render through standard input and output The first thing might look like this:

$ stylus < test.styl

This might generate an error like this 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 applications of the Stylus API With our plugin, we can add search paths. By using the --include or -I flag:

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

Now the generated content is as follows. You may have noticed that gradient-data-uri() and create-gradient-image() are output in literal form. This is because when a plug-in provides a JavaScript API, it is not enough to expose the plug-in's path. However, if all we want is pure Stylus nib functions, that's 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 the --use or -u flag. It will look for the node module (with or without .js extension) path. The require() module here may call style.use(fn()) to expose the plug-in (define js functions, etc.).

$ stylus < test.styl --use ../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 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%);}