stylus usage documentation summary: built-in method + parameter + condition + iteration

The built-in method

　　Return the proportion of various colors (such as red(color), etc.)

　　keys(pairs)/values(pairs): returns pairsthe keys/values ​​in the given

pairs = (one 1) (two 2) (three 3)
keys(pairs)
// => one two three
values(pairs)
// => 1 2 3

nodetypeof(node): return type 　　in string form

typeof(12)
// => 'unit'
typeof(#fff)
// => 'rgba'

　　Anyway, a lot, I won't go into details, I will check it when I use it

Second, the rest parameters (Rest Params)

1. Other parameters: Stylus supports name...the remaining parameters of the form ( rest style parameters ). These arguments digest arguments passed to mixins or functions. This is useful when dealing with browser-private properties like -mozor . -webkitIn the example below, all parameters (1px, 2px, ...) are argssimply digested by one parameter

box-shadow(args...)
  -webkit-box-shadow args
  -moz-box-shadow args
  box-shadow args

#login
  box-shadow 1px 2px 5px #eee

2. Parameters: argumentsVariables can achieve precise transfer of expressions, including commas and so on. This can make up args...for some deficiencies in parameters , see the example below:

box-shadow(args...)
  -webkit-box-shadow args
  -moz-box-shadow args
  box-shadow args
#login
  box - shadow #ddd 1px 1px, #eee 2px 2px 
 // The result is not as good: 
#login {
   -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;
}
// Commas are ignored. We now redefine this hybrid writing using arguments. 
box - shadow()
   -webkit-box- shadow arguments
   -moz-box- shadow arguments
  box-shadow arguments
body
  box - shadow #ddd 1px 1px, #eee 2px 2px
 // So, it rained all of a sudden: 
body {
   -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;
}

3. Notes

　　Single-line and multi-line comments are the same as js

　　Multi-line buffer comments: Similar to multi-line comments, the difference is that at the beginning, here is /*!, this is equivalent to telling Stylus to ignore the direct output when compressing.

/*!
 * Combination of given values
 */
add(a, b)
  a + b

Four, conditions

　　if / else if / else, nothing to say

　　除非(unless)：熟悉Ruby程序语言的用户应该都知道unless条件，其基本上与if相反，本质上是(!(expr))。

　　后缀条件：Stylus支持后缀条件，这就意味着if和unless可以当作操作符；当右边表达式为真的时候执行左边的操作对象。

五、迭代(Iteration)

　　Stylus允许你通过for/in对表达式进行迭代形式如下：for <val-name> [, <key-name>] in <expression>

body
  fonts = Impact Arial sans-serif
  for font, i in fonts
    foo i font
//生成为：
body {
  foo: 0 Impact;
  foo: 1 Arial;
  foo: 2 sans-serif;
}

　　函数(Functions)：Stylus函数同样可以包含for循环。下面就是简单使用示例：

//求和：
sum(nums)
  sum = 0
  for n in nums
    sum += n
sum(1 2 3)// => 6

//连接：
join(delim, args)
  buf = ''
  for arg, index in args
    if index
      buf += delim + arg
    else
      buf += arg

join(', ', foo bar baz)
// => "foo, bar, baz"

　　后缀(Postfix)：就跟if/unless可以利用后面语句一样，for也可以。

sum(nums)
  sum = 0
  sum += n for n in nums

join(delim, args)
  buf = ''
  buf += i ? delim + arg : arg for arg, i in args