stylus笔记（二）

1.方法

函数  Stylus强大之处就在于其内置的语言函数定义。其定义与混入(mixins)一致；却可以返回值。

默认参数

可选参数往往有个默认的给定表达。在Stylus中，我们甚至可以超越默认参数。

例如：

add(a, b = a)
  a + b

add(10, 5)
// => 15

add(10)
// => 20

注意：因为参数默认是赋值，我们可可以使用函数调用作为默认值。

add(a, b = unit(a, px))
  a + b

函数体

我们可以把简单的add()方法更进一步。通过内置unit()把单位都变成px, 因为赋值在每个参数上，因此，我们可以无视单位换算。

add(a, b = a)
  a = unit(a, px)
  b = unit(b, px)
  a + b

add(15%, 10deg)
// => 25

多个返回值

Stylus的函数可以返回多个值，就像你给变量赋多个值一样。

例如，下面就是一个有效赋值：

sizes = 15px 10px

sizes[0]
// => 15px
类似的，我们可以在函数中返回多个值：

sizes()
 15px 10px

sizes()[0]
// => 15px

有个小小的例外就是返回值是标识符。例如，下面看上去像一个属性赋值给Stylus（因为没有操作符）。

swap(a, b)
  b a
为避免歧义，我们可以使用括号，或是return关键字。

swap(a, b)
  (b a)

swap(a, b)
  return b a

条件  使用yes和no代替true 和false 注意：yes和no并不是布尔值。本例中，它们只是简单的未定义标识符。

stringish(val)
  if val is a 'string' or val is a 'ident'
    yes
  else
    no
使用：

stringish('yay') == yes
// => true

stringish(yay) == yes
// => true

stringish(0) == no
// => true
其他例子：

compare(a, b)
  if a > b
    higher
  else if a < b
    lower
  else
    equal

变量函数 即把函数当作变量传递到新的函数中

invoke(a, b, fn)
  fn(a, b)

参数

arguments是所有函数体都有的局部变量，包含传递的所有参数。

sum()
  n = 0
  for num in arguments
    n = n + num

sum(1,2,3,4,5)
// => 15

哈希示例

定义get(hash, key)方法，用来返回key值或null. 我们遍历每个键值对，如果键值匹配，返回对应的值。

get(hash, key)
  return pair[1] if pair[0] == key for pair in hash
下面例子可以证明，语言函数模样的Stylus表达式具有更大的灵活性。

hash = (one 1) (two 2) (three 3)

get(hash, two)
// => 2

get(hash, three)
// => 3

get(hash, something)
// => null

2. 关键字参数

查看函数或混合书写中接受的参数，可以使用p()方法。

3.内置方法

red(color)      green(color)      blue(color)   alpha(color)  返回color中的颜色比重，透明度比重

alpha(#fff)
// => 1

dark(color)  检查color是否是暗色   light(color)  检查color是否是亮色  hue(color)  返回给定color的色调   saturation(color)  返回给定color的饱和度  lightness(color)  返回给定color的亮度

hue(hsla(50deg, 100%, 80%))
// => 50deg

saturation(hsla(50deg, 100%, 80%))
// => 100%

lightness(hsla(50deg, 100%, 80%))
// => 80%

push(expr,args...)   别名append（）  unshift(expr,args) 别名prepend（）

nums = 1 2
push(nums, 3, 4, 5)

nums
// => 1 2 3 4 5
nums = 4 5

unshift(nums, 3, 2, 1)

nums
// => 1 2 3 4 5

keys(pairs)，values(pairs)  返回Paris中的键 值。

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

typeof(node)  别名有type-of和type。  unit(unit[, type])

返回unit类型的字符串或空字符串，或者赋予type值而无需单位转换。

type(12)
// => 'unit'

typeof(12)
// => 'unit'

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

type-of(#fff)
// => 'rgba'

unit(10)
// => ''

unit(15in)
// => 'in'

unit(15%, 'px')
// => 15px

unit(15%, px)
// => 15px

match(pattern, string) 检测string是否匹配给定的pattern.  abs(unit) 绝对值   ceil（unit）floor(unit) 向上，下取整  round(unit) 四舍五入取整  even(unit)是否为偶数 odd(unit) 是否为奇数

match('^foo(bar)?', 'bar')
// => false
match('^foo(bar)?', foobar)
// => true

此外还有sum, avg. length().

join(delim, vals...) 给定vals使用delim连接

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

invert(color) 颜色反相。红绿蓝颜色反转，透明度不变。  unquote(str | ident)  给定str引号去除，返回Literal节点。

s(fmt, …) s()方法类似于unquote()，不过后者返回的是Literal节点，而这里起接受一个格式化的字符串，非常像C语言的sprintf(). 目前，唯一标识符是%s.

unquote("sans-serif")
// => sans-serif

s('bar()');
// => bar()

s('bar(%s)', 'baz');
// => bar("baz")

s('bar(%s)', baz);
// => bar(baz)

s('rgba(%s, %s, %s, 0.5)', 255, 100, 50);
// => rgba(255, 100, 50, 0.5)

s('bar(%Z)', 15px);
// => bar(%Z)

s('bar(%s, %s)', 15px);
// => bar(15px, null)

operate（op,left,right） 在left和right操作对象上执行给定的op.

op = '+'
operate(op, 15, 5)
// => 20

warm(msg) 使用给定的error警告，并不退出。  error（msg）伴随给定的错误msg退出。last(expr) 返回给定expr的最后一个值。

p(expr) 检查，类似得到确定信息

p(fonts)
inspect: Arial, sans-serif

opposite-position(positions) 返回给定position相反内容

opposite-position(top left)
// => bottom right

image-size（path） 返回指定path图片的width和height. 向上查找路径的方法和@import一样，paths设置的时候改变。

width(img)
  return image-size(img)[0]

height(img)
  return image-size(img)[1]

image-size('tux.png')
// => 405px 250px

image-size('tux.png')[0] == width('tux.png')
// => true

add-property(name, expr) 使用给定的expr为最近的块域添加属性name。

something()
  add-property('bar', 1 2 3)
  s('bar')

body
  foo: something()
真实面目：

body {
  bar: 1 2 3;
  foo: bar;
}
接下来，“神奇”的current-property局部变量将大放异彩，这个变量自动提供给函数体，且包含当前属性名和值的表达式。

例如，我们使用p()检查这个局部变量，我们可以得到：

p(current-property)
// => "foo" (foo __CALL__ bar baz)

p(current-property[0])
// => "foo"

p(current-property[1])
// => foo __CALL__ bar baz

Stylus支持name...形式的其余参数。这些参数可以消化传递给混写或函数的参数们。这在处理浏览器私有属性，如-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
生成为：

#login {
  -webkit-box-shadow: 1px 2px 5px #eee;
  -moz-box-shadow: 1px 2px 5px #eee;
  box-shadow: 1px 2px 5px #eee;
}

我们想指定特定的参数，如x-offset，我们可以使用args[0], 或者，我们可能希望重新定义混入。

2.注释

Stylus支持三种注释，单行注释，多行注释，以及多行缓冲注释。

单行：跟JavaScript一样，双斜杠，CSS中不输出。  多行：多行注释看起来有点像CSS的常规注释。然而，它们只有在compress选项未启用的时候才会被输出。

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

/*!
 * 给定数值合体
 */

add(a, b)
  a + b

3.条件

if/else 同一般的语言

除非 unless ， 其基本上与if相反，本质上是(!(expr)).

下面这个例子中，如果disable-padding-override是undefined或false, padding将被干掉，显示margin代替之。但是，如果是true, padding将会如期继续输出padding 5px 10px.

disable-padding-override = true

unless disable-padding-override is defined and disable-padding-override
  padding(x, y)
    margin y x

body
  padding 5px 10px

后缀条件

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

例如，我们定义negative()来执行一些基本的检查：

negative(n)
  error('无效数值') unless n is a 'unit'
  return yes if n < 0
  no

pad(types = margin padding, n = 5px)
  padding unit(n, px) if padding in types
  margin unit(n, px) if margin in types

body
  pad()

body
  pad(margin)

body
  apply-mixins = true
  pad(padding, 10) if apply-mixins
生成为：

body {
  padding: 5px;
  margin: 5px;
}
body {
  margin: 5px;
}
body {
  padding: 10px;
}

4.迭代

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;
}