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

This article will explain in detail how to use stylus for you. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Stylus is an expressive, dynamic and robust CS preprocessing. Css preprocessing, as the name implies, pre-processes css. So how does stylus handle it in advance? Stylus adds programmability to css, that is, you can use variables, functions, judgments, and loops in stylus to write style files that are not available in css. After performing this set of operations, this file can be compiled into css files.

Installation of Stylus

First, install stylus (make sure nodejs is already installed).

$npminstallstylus

After installation, run stylus-h to view help. Run stylusexample.styl to compile the demo.styl file into an example.css file.

Operation of Stylus

1. Grammar

Stylus has more syntax tricks, using the extension ".styl", and Stylus also accepts the standard css syntax, but he also accepts syntax without curly braces and semicolons, as follows:

/ * style.styl*/

H2 {

Color:#0982C1

}

/ * omit curly braces * /

H2

Color:#0982C1

/ * omit curly braces and semicolons * /

H2

Color#0982C1

two。 Variable

You can declare variables in the css preprocessor and use them throughout the stylesheet. The css preprocessor supports any variable (for example, color, numeric value (whether including units or not), text). Then you can reference variables anywhere.

Stylus declares that there are no restrictions on variables, and you can start with the "$" symbol. The semicolon (;) at the end is optional, but the equal sign (=) between the variable name and the variable value is required. It is important to note that if we declare a variable (0.22.4) with the beginning of the "@" symbol, Stylus compiles, but its corresponding value is not assigned to the variable. In other words, do not declare variables at the beginning of the "@" symbol in Stylus.

MainColor=#0982c1

SiteWidth=1024px

$borderStyle=dotted

Body

ColormainColor

Border1px$borderStylemainColor

Max-widthsiteWidth

The above code will all be translated into the same css. You can imagine how useful variables are. We don't need to type a color many times, nor do we need to look for it in order to change a width. We only need to modify the defined variables, and once is enough.

This is the end of the article on "how to use stylus". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please 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.