Stylus入门教程--实例（2）

1、函数（function）

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

• 多个返回值

sizes = 15px 10pxsizes[0]// => 15px

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

• 难点：哈希示例

下面，我们定义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)// => 2get(hash, three)// => 3get(hash, something)// => null

2、关键字参数（key arguments）

Stylus支持关键字参数，或”kwargs”. 允许你根据相关参数名引用参数。

下面这些例子功能上都是一样的。但是，我们可以在列表中的任何地方放置关键字参数。其余不键入参数将适用于尚未得到满足的参数。

body {  color: rgba(255, 200, 100, 0.5);  color: rgba(red: 255, green: 200, blue: 100, alpha: 0.5);  color: rgba(alpha: 0.5, blue: 100, red: 255, 200);  color: rgba(alpha: 0.5, blue: 100, 255, 200);}

编译为

body {   color: rgba(255,200,100,0.5);   color: rgba(255,200,100,0.5);   color: rgba(255,200,100,0.5);   color: rgba(255,200,100,0.5);}

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

p(rgba)

生成

inspect: rgba(red, green, blue, alpha)

3、内置方法（Built-in Functions）
- 返回颜色比重

red（#c00）// =>204

类似的还有green（color）、blue（color）、alpha（color）

• 检查color是否是暗色：dark(color)

dark(black)// => truedark(#005716)// => truedark(white)// => false

• 检查color是否为亮色：light（color）

light(black) // => falselight(white) // => truelight(#00FF40) // => true

• 返回颜色的色调：hue（color）

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

类似的还有：staturation（color）饱和度、lightness(color)亮度

push(expr, args…)

后面推送给定的args给expr.

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

别名为append()
unshift(expr, args…)

起始位置插入给定的args给expr.

nums = 4 5unshift(nums, 3, 2, 1)nums// => 1 2 3 4 5

别名为prepend().

重点：

unit(unit[, type])

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

unit(10)// => ''unit(15in)// => 'in'unit(15%, 'px')// => 15pxunit(15%, px)// => 15px

p(expr)

检查给定的expr.

fonts = Arial, sans-serifp('test')p(123)p((1 2 3))p(fonts)p(#fff)p(rgba(0,0,0,0.2))add(a, b)  a + bp(add)

标准输出：

inspect: "test"inspect: 123inspect: 1 2 3inspect: Arial, sans-serifinspect: #fffinspect: rgba(0,0,0,0.2)inspect: add(a, b)

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

4、注释（comments）

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

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

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

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