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