Learning about vue, some people recommend stylus as a css preprocessor. Before that, I just stayed to hear about stylus, but I didn't actually operate it. Now it's time to learn; if it's less, sass and other css precompilers, learning stylus is so easy!
Sources of learning: Zhang Xinxu's personal blog, this is a css industry bull

Let's start with a code comparison.

body
    color: white
    textarea, input
        border: 1px solid #333
    p
    li
    ul
        margin: 0
    .contain
        &:hover
            opacity: 0.8

Equate to

body {
    color: white;
}
body textarea,
body input {
    border: 1px solid #333;
}
body p,
body li,
body ul {
    margin: 0;
}
body .contain:hover {
    opacity: 0.8;
}

At present, stylus is to remove the curly braces of sass, not the semicolon. According to the previous sass, less grammar, there is not much difference. So without further explanation, go on.

With attribute values that stylus cannot handle, unquote() can be used

filter
unquote('progid: DXImageTransform.Microsoft.BasicImage(rotation=1)')

Transform into

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1)

# Declare variables

Use'='directly to declare that a variable can have a $character

font-size = 14px
$color = #ddd
body {
    font-size: font-size
    background-color: $color
}

Equate to

body {
    font-size: 14px;
    background-color: #ddd;
}

Interpolation algorithm

Stylus supports the use of {} characters to surround expressions to insert values that become part of identifiers. For example, -webkit - {border'+'-radius'} is equivalent to-webkit-border-radius.

vendor(prop, args)
  -webkit-{prop} args
  -moz-{prop} args
  {prop} args

border-radius()
  vendor('border-radius', arguments)

box-shadow()
  vendor('box-shadow', arguments)

button
  border-radius 1px 2px / 3px 4px

convert to

button {
  -webkit-border-radius: 1px 2px / 3px 4px;
  -moz-border-radius: 1px 2px / 3px 4px;
  border-radius: 1px 2px / 3px 4px;  
}

Interpolation also works on selectors. eg:

table
  for row in 1 2 3 
    tr:nth-child({row})
      height: 10px * row

The same as:

table tr:nth-child(1) {
    height: 10px;
}
table tr:nth-child(2) {
    height: 20px;
}
table tr:nth-child(3) {
    height: 30px;
}

With this attribute, we can encapsulate many methods. Encapsulate browser compatible prefix writing into a function.

add-attr-prefix(attr, args) {
    -webkit-{attr}: args
    -moz-{attr}: args
    -o-{attr}: args
    -ms-{attr}: args
    {attr}: args
}

// Encapsulate the box-shadow function
box-shadow()
    add-attr-prefix('box-shadow', arguments)
body
    box-shadow: 8px 8px 20px red

Equivalent to

body {
    -webkit-box-shadow: 8px 8px 20px red;
    -moz-box-shadow: 8px 8px 20px red;
    -o-box-shadow: 8px 8px 20px red;
    -ms-box-shadow: 8px 8px 20px red;
    box-shadow: 8px 8px 20px red;
}

# Mixed Writing

Mixing is consistent with function definition, but its application is quite different.
Definition:

aaa ()
    Statement block

For example,

border-radius(npx)
    -webkit-border-radius npx
    -moz-border-radius npx
    border-radius npx
.box
    border-radius(5px)
// With mixed-in writing, you can completely ignore parentheses and provide support for fantastic private attributes.
    border-radius 5px

You can also use arguments without passing parameters.

border-radius()
    -webkit-border-radius arguments
    -moz-border-radius arguments
    border-radius arguments
box-shadow(args...)
    -webkit-box-shadow args
    -moz-box-shadow args
    box-shadow args
box-shadow1()
    -webkit-box-shadow agruments
    -moz-box-shadow agruments
    box-shadow agruments
.box
    box-shadow 1px 1px 5px red, 1px 3px 5px green
.box1
    box-shadow 1px 1px 5px red, 1px 3px 5px green

It should be noted that argument and args... The former can accurately pass all parameters, including some special symbols such as commas.
Look at the output:

.box {
    -webkit-box-shadow: #ddd 1px 1px #eee 2px 2px;
    -moz-box-shadow: #ddd 1px 1px #eee 2px 2px;
    box-shadow: #ddd 1px 1px #eee 2px 2px;
}
.box1 {
    -webkit-box-shadow: #ddd 1px 1px, #eee 2px 2px;
    -moz-box-shadow: #ddd 1px 1px, #eee 2px 2px;
    box-shadow: #ddd 1px 1px, #eee 2px 2px;
}

Like less, sass, referencing a parent is also a use of &; use & encapsulate a stripe table

stripe(even = #fff, odd = #eee)
    tr
        background-color odd
        &.even
        &:nth-child(even)
            background-color even

Functions can return values. Sometimes the return value is not a specific value, but an indicator.

swap(a, b)
    b a

In this case, write

swap(a, b)
    (b a)
swap(a, b)
    return b a

Individuals use very few methods in actual projects, so they feel that they use very few methods without game development. See here, even if it is already introduced.

Annotation

Stylus supports three types of annotations, one-line annotations, multi-line annotations, and multi-line buffered annotations.
The first three are not much to say, and they are exactly the same as the previous ones. For multi-line buffered comments, similar to multi-line comments, the difference is that at the beginning, here is /*!. This is equivalent to ignoring direct output when telling Stylus to compress.

Condition of occlusion

If, else if, else is the same as the common condition. In stylus, unless conditions are used, just like ruby. It's also well understood that it's basically the opposite of if, essentially (!(expr). eg:

disable = true

unless disable 
    display none

In addition, Stylus supports suffix conditions, which means if and unless can be used as operators; when the right expression is true, the left operation object is executed.
Generally applicable to single-line statements.
For example:

negative(n)
  unless n is a 'unit'
    error('invalid number')
  if n < 0
    yes
  else
    no
// It can be written in the following form.
negative(n)
  error('invalid number') unless n is a 'unit'
  return yes if n < 0
  no

Iteration

for <val-name> [, <key-name>] in <expression>

I don't think it's needed in the actual development. Let's put it aside for the time being and wait for the follow-up.

#@import

The filename of any. css extension will be literal. For example,

@import "reset.css"

// Rendered as===>.
@import "reset.css"

When using @import without. css extension, it is considered a Stylus fragment (e.g. @import"mixins/border-radius).

@ Import works by traversing the directory queue and checking whether there is a file in any directory (node-like require.paths). The queue defaults to a single path, derived from the dirname of the filename option. Therefore, if your file name is / tmp/testing/stylus/main.styl, the import will appear as / tmp/testing/stylus /.

@ Import also supports indexing. This means that when you @import blueprint, it will be interpreted as blueprint. style or blueprint/index.styl. This is useful for libraries to show all features and functions while importing feature subsets.

There's not much difference between @media, @font-face, @keyframes and css.

Note that @keyframes automatically add a private prefix (webkit moz official) through the vendors variable. If we just want standard parsing, it's easy to modify vendors = official.

#@extend

Look at an example and feel it.

red = #E33E1E
yellow = #E2E21E

.message
  padding: 10px
  font: 14px Helvetica
  border: 1px solid #eee

.warning
  @extends .message
  border-color: yellow
  background: yellow + 70%

.error
  @extends .message
  border-color: red
  background: red + 70%

.fatal
  @extends .error
  font-weight: bold
  color: red

Generate css as follows

.message,
.warning,
.error,
.fatal {
  padding: 10px;
  font: 14px Helvetica;
  border: 1px solid #eee;
}
.warning {
  border-color: #e2e21e;
  background: #f6f6bc;
}
.error,
.fatal {
  border-color: #e33e1e;
  background: #f7c5bc;
}
.fatal {
  font-weight: bold;
  color: #e33e1e;
}

ok, stylus learning, that's all. Later it is necessary to study in depth.

That night I burned all my memories, and my dreams became transparent. That day I threw away all my yesterday and my feet became light. One Tagore (The Flying Birds Collection)