In fact, I have been watching the LEAGUE of Legends S8 finals most of the time. Here is my summary of Stylus. This article should be helpful for beginners to Stylus. To make the code more aesthetically pleasing to you, the code is presented in screenshots, using the IDE VSCode.

introduce

Stylus is an excellent CSS precompiler that is a new favorite for front-end workflows. Very simple to write! How simple is it? Look at the picture


No semicolons needed!! No colons needed!! Even the curly braces can be omitted!!


The installation

You can use Yarn to install it (recommended) (for those who don’t know yarn, see my previous article on yarn usage ~ juejin. Im /post/684490…)

yarn global add stylus

You can also install it using NPM

npm install stylus -g

Once installed, you can use the stylus command to compile the CSS file

usage

The command

Stylus Basic compilation command

Stylus xxx.styl -o xxx. CSS // XXX is the name of the file you created. -o means -out outputs the CSS fileCopy the code

For example, if this is my file directory, first create the stylus file. You can choose the name of the file, but I call it style here. The file suffix must end with.styl




Did you find that each time you modify the stylus file, you have to enter the stylus command again for recompilation, which is a great inconvenience for us developers? Stylus offers a solution by adding -W to the original

Stylus -w xxx.styl -o xxx. CSS stylus -w xxx.styl -o xxx. CSSCopy the code

This allows you to listen for changes in real time and compile in real time.

The selector

  • As I said at the beginning, the indentation of the stylus is very important. The stylus is what separates the selectors from the CSS style by the indentation, so after you write the selectors, make sure you indent the next line
  • The comma

    Stylus, like CSS, allows you to use commas to define properties for multiple selectors at the same time.

    The same effect can be achieved by leaving out commas and using one selector on one line

  • nested

    Stylus supports nested syntax, which is equivalent to descendant selectors
  • The parent reference

    A parent reference is simply a concatenation with the parent selector. The syntax is to precede a nested selector&Characters, let’s go straight to the example
    1. Implement the use of intersection selectors
    2. Implement the use of pseudo-elements

variable

In Stylus, you can define variables to store frequently used data and then use them throughout our styles. The method of defining variables is also very simple, using the form of variable name = variable value

bgc = green
fz = 10px
...
Copy the code

It is recommended that variables be assigned uniformly at the top






@ + attribute names

hybrid

Mixing can be similar to code blocks, allowing for code reuse, for example

Method (function)

The power of Stylus lies in its built-in language function definitions. The definition is the same as mixins, except that a mixin reference directly reuses a block of code, whereas a function reference returns a return value. Here’s a simple example

annotation

Talk about comments, one-line comments & multi-line comments One-line comments

The introduction of

Sylus can also introduce the external stylus file

conclusion

CSS preprocessors are similar in that they give CSS programmability, including variables, functions, operators, if-else operations, and so on. If you want to learn more about Stylus, I recommend you to read Zhang Xinxu’s great Stylus article. www.zhangxinxu.com/jq/stylus/ here only lists the common usage at ordinary times, enough to solve most problems in actual combat. Hope to give you some help, if you think this article is good, you can support thanks!