stylus使用文档总结:内置方法+参数+条件+迭代

一、内置方法

  返回各种颜色的比重(如red(color)等)

  keys(pairs)/values(pairs):返回给定pairs中的键/值

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

  typeof(node):字符串形式返回node类型

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

  反正很多,不细说,用到的时候再查

二、其余参数(Rest Params)

1、其余参数:Stylus支持name...形式的其余参数(rest风格参数)。这些参数可以消化传递给混写或函数的参数们。这在处理浏览器私有属性,如-moz-webkit的时候很管用。下面这个例子中,所有的参数们(1px, 2px, ...)都被一个args参数给简单消化

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

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

2、参数们:arguments变量可以实现表达式的精确传递,包括逗号等等。这可以弥补args...参数的一些不足,见下面的例子:

box-shadow(args...)
  -webkit-box-shadow args
  -moz-box-shadow args
  box-shadow args
#login
  box-shadow #ddd 1px 1px, #eee 2px 2px 
//结果并非称心如意:
#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;
}
//逗号给忽略了。我们现在使用arguments重新定义这个混合书写。
box-shadow()
  -webkit-box-shadow arguments
  -moz-box-shadow arguments
  box-shadow arguments
body
  box-shadow #ddd 1px 1px, #eee 2px 2px
//于是,一下子雨过天晴了:
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;
}

三、注释

  单行和多行注释跟js一样

  多行缓冲注释:跟多行注释类似,不同之处在于开始的时候,这里是/*!,这个相当于告诉Stylus压缩的时候这段无视直接输出。

/*!
 * 给定数值合体
 */
add(a, b)
  a + b

四、条件

  if / else if / else,没什么好说的

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

  后缀条件:Stylus支持后缀条件,这就意味着ifunless可以当作操作符;当右边表达式为真的时候执行左边的操作对象

五、迭代(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

猜你喜欢

转载自www.cnblogs.com/goloving/p/8911450.html