Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use the styluscss framework, the content of the article is of high quality, so the editor will share it for you as a reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

Stylus is a CSSS 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 and then loaded daily.

Stylus is an excellent css compiled language, which needs node.js support. The first step is to install node.js.

Question: ctrl+d has no effect when Windows debugging ctrl+c exit? How to output debug code directly under windows

Remarks: # indicates that the bank is the input and enter running bank.

Download nodejs from the official website

XML/HTML Code copies content to the clipboard

Tar xvf node-v0.10.28.tar.gz # cd node-v0.10.28 #. / configure # make # make install # cp / usr/local/bin/node / usr/sbin/

Node-v View node version information. If any information is returned, the installation is successful.

Install stylus

# npm install stylus-g Note: you must find-g and configure the environment as the global method.

Debug Stylus

CSS Code copies content to the clipboard

# 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 the result returned by Ctrl+D debugging

See if it will return.

CSS Code copies content to the clipboard

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 contents:

CSS Code copies content to the clipboard

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 close and run the following command on the command line:

# stylus-compress

Test.css

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

CSS Code copies content to the clipboard

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 html can call.

Appendix:

Sample compilation file

Stylus also accepts files and directories. For example, a directory named css compiles and outputs .css files in the same directory.

The following $stylus css 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 the number of lines in the generated CSS.

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

$stylus-- firebug converts CSS

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

Through standard input and output:

$stylus-css

Test.styl outputs a .styl file with the same base name.

$stylus-- css test.css outputs specific targets:

$stylus-- help for the css test.css / tmp/out.stylCSS attribute

On OS X, stylus help will open your default browser and display the help documentation for the given properties.

$stylus help box-shadow shell interaction (Interactive Shell)

Stylus REPL (Read-Eval-Print-Loop) or "shell interaction (Interactive Shell)" allows you to play with Stylus expressions directly on the terminal.

Note that only expressions can take effect, not selectors. For simplicity, let's add the-I or-- interactive flag:

$stylus-I

> color = white

= > # fff

> color-rgb (200ju 50jin0)

= > # 37cdff

> color

= > # fff

> color-= rgb (200550pm 0)

= > # 37cdff

> color

= > # 37cdff

> rgba (color, 0.5)

= > rgba (55, 205, 255, 255, 0.5) uses plug-ins

In this example, we will use the nibStylus plug-in to illustrate its CLI usage.

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

@ import 'nib'

Body

Background: linear-gradient (20px top, white, black) the first thing we are trying to render with standard input and output using stylus (1) might be something like this:

$stylus

3 | @ import 'nib'

4 |

5 | body

6 | background: linear-gradient (20px top, white, black) for plugins that simply apply Stylus API, we can add a search path. By using the-- include or-I flag:

$stylus < test.styl-- include.. / nib/lib is now generated as follows. You may have noticed that gradient-data-uri () and create-gradient-image () are output literally. This is because when the plug-in provides JavaScript API, it is not enough to expose the plug-in's path. However, if all we want is a pure Stylus nib function, that's enough.

CSS Code copies content to the clipboard

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

Therefore, what we need to do is to use the-- use or-u flag. It looks for the path to the node module (with or without the .js extension), where the require () module or calls style.use (fn ()) to expose the plug-in (defining js functions, etc.).

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

CSS Code copies content to the clipboard

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

JavaScript Code copies content to the clipboard

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);}) .subscription (1337, '127.0.0.1'); console.log ('http://127.0.0.1:1337/'); has been started}) On how to use the styluscss framework to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.