内置方法
red(color)
返回color
中的红色比重。
red(#c00)
// => 204
green(color)
返回color
中的绿色比重。
green(#0c0)
// => 204
blue(color)
返回color
中的蓝色比重。
red(#00c)
// => 204
alpha(color)
返回color
中的透明度比重。
alpha(#fff) // => 1 alpha(rgba(0,0,0,0.3)) // => 0.3
dark(color)
检查color
是否是暗色。
dark(black) // => true dark(#005716) // => true dark(white) // => false
light(color)
检查color
是否是亮色。
light(black) // => false light(white) // => true light(#00FF40) // => true
hue(color)
返回给定color
的色调。
hue(hsla(50deg, 100%, 80%))
// => 50deg
saturation(color)
返回给定color
的饱和度。
saturation(hsla(50deg, 100%, 80%))
// => 100%
lightness(color)
返回给定color
的亮度。
lightness(hsla(50deg, 100%, 80%))
// => 80%
push(expr, args…)
后面推送给定的args
给expr
.
nums = 1 2
push(nums, 3, 4, 5)
nums
// => 1 2 3 4 5
别名为append()
.
unshift(expr, args…)
起始位置插入给定的args
给expr
.
nums = 4 5
unshift(nums, 3, 2, 1)
nums
// => 1 2 3 4 5
别名为prepend()
.
keys(pairs)
返回给定pairs
中的键。
pairs = (one 1) (two 2) (three 3)
keys(pairs)
// => one two three
values(pairs)
返回给定pairs
中的值。
pairs = (one 1) (two 2) (three 3)
values(pairs)
// => 1 2 3
typeof(node)
字符串形式返回node
类型。
type(12) // => 'unit' typeof(12) // => 'unit' typeof(#fff) // => 'rgba' type-of(#fff) // => 'rgba'
别名有type-of
和type
.
unit(unit[, type])
返回unit
类型的字符串或空字符串,或者赋予type
值而无需单位转换。
unit(10) // => '' unit(15in) // => 'in' unit(15%, 'px') // => 15px unit(15%, px) // => 15px
match(pattern, string)
检测string
是否匹配给定的pattern
.
match('^foo(bar)?', foo) match('^foo(bar)?', foobar) // => true match('^foo(bar)?', 'foo') match('^foo(bar)?', 'foobar') // => true match('^foo(bar)?', 'bar') // => false
abs(unit)
绝对值。
abs(-5px) // => 5px abs(5px) // => 5px
ceil(unit)
向上取整。
ceil(5.5in)
// => 6in
floor(unit)
向下取整。
floor(5.6px)
// => 5px
round(unit)
四舍五入取整。
round(5.5px) // => 6px round(5.4px) // => 5px
min(a, b)
取较小值。
min(1, 5)
// => 1
max(a, b)
取较大值。
max(1, 5)
// => 5
even(unit)
是否为偶数。
even(6px)
// => true
add(unit)
是否为奇数。
odd(5mm)
// => true
sum(nums)
求和。
sum(1 2 3)
// => 6
avg(nums)
求平均数。
avg(1 2 3)
// => 2
join(delim, vals…)
给定vals
使用delim
连接。
join(' ', 1 2 3) // => "1 2 3" join(',', 1 2 3) // => "1,2,3" join(', ', foo bar baz) // => "foo, bar, baz" join(', ', foo, bar, baz) // => "foo, bar, baz" join(', ', 1 2, 3 4, 5 6) // => "1 2, 3 4, 5 6"
hsla(color | h,s,l,a)
转换给定color
为HSLA
节点,或h,s,l,a比重值。
hslaa(10deg, 50%, 30%, 0.5) // => HSLA hslaa(#ffcc00) // => HSLA
hsla(color | h,s,l)
转换给定color
为HSLA
节点,或h,s,l比重值。
hsla(10, 50, 30) // => HSLA hsla(#ffcc00) // => HSLA
rgba(color | r,g,b,a)
从r,g,b,a通道返回RGBA
, 或提供color
来调整透明度。
rgba(255,0,0,0.5) // => rgba(255,0,0,0.5) rgba(255,0,0,1) // => #ff0000 rgba(#ffcc00, 0.5) // rgba(255,204,0,0.5)
另外,stylus支持#rgba
以及#rrggbbaa
符号。
#fc08 // => rgba(255,204,0,0.5) #ffcc00ee // => rgba(255,204,0,0.9)
rgb(color | r,g,b)
从r,g,b通道返回RGBA
或生成一个RGBA
节点。
rgb(255,204,0) // => #ffcc00 rgb(#fff) // => #fff
lighten(color, amount)
给定color
增亮amount
值。该方法单位敏感,例如,支持百分比,如下:
lighten(#2c2c2c, 30) // => #787878 lighten(#2c2c2c, 30%) // => #393939
darken(color, amount)
给定color
变暗amount
值。该方法单位敏感,例如,支持百分比,如下:
darken(#D62828, 30) // => #551010 darken(#D62828, 30%) // => #961c1c
desaturate(color, amount)
给定color
饱和度减小amount
.
desaturate(#f00, 40%)
// => #c33
saturate(color, amount)
给定color
饱和度增加amount
.
saturate(#c33, 40%)
// => #f00
invert(color)
颜色反相。红绿蓝颜色反转,透明度不变。
invert(#d62828)
// => #29d7d7
unquote(str | ident)
给定str
引号去除,返回Literal
节点。
unquote("sans-serif") // => sans-serif unquote(sans-serif) // => sans-serif unquote('1px / 2px') // => 1px / 2px
s(fmt, …)
s()
方法类似于unquote()
,不过后者返回的是Literal
节点,而这里起接受一个格式化的字符串,非常像C语言的sprintf()
. 目前,唯一标识符是%s
.
s('bar()'); // => bar() s('bar(%s)', 'baz'); // => bar("baz") s('bar(%s)', baz); // => bar(baz) s('bar(%s)', 15px); // => bar(15px) 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
length([expr])
括号表达式扮演元组,length()
方法返回该表达式的长度。
length((1 2 3 4)) // => 4 length((1 2)) // => 2 length((1)) // => 1 length(()) // => 0 length(1 2 3) // => 3 length(1) // => 1 length() // => 0
warn(msg)
使用给定的error
警告,并不退出。
warn("oh noes!")
error(msg)
伴随着给定的错误msg
退出。
add(a, b) unless a is a 'unit' and b is a 'unit' error('add() expects units') a + b
last(expr)
返回给定expr
的最后一个值。
nums = 1 2 3 last(nums) last(1 2 3) // => 3 list = (one 1) (two 2) (three 3) last(list) // => (three 3)
p(expr)
检查给定的expr
.
fonts = Arial, sans-serif p('test') p(123) p((1 2 3)) p(fonts) p(#fff) p(rgba(0,0,0,0.2)) add(a, b) a + b p(add)
标准输出:
inspect: "test" inspect: 123 inspect: 1 2 3 inspect: Arial, sans-serif inspect: #fff inspect: rgba(0,0,0,0.2) inspect: add(a, b)
opposite-position(positions)
返回给定positions
相反内容。
opposite-position(right) // => left opposite-position(top left) // => bottom right 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
使用current-property
我们可以让例子走得更远点,使用新值复制该属性,且确保功能的条件仅在属性值中使用。
something(n) if current-property add-property(current-property[0], s('-webkit-something(%s)', n)) add-property(current-property[0], s('-moz-something(%s)', n)) s('something(%s)', n) else error('something() must be used within a property') body { foo: something(15px) bar; }
生成为:
body { foo: -webkit-something(15px); foo: -moz-something(15px); foo: something(15px) bar; }
如果你注意上面这个例子,会发现bar
只在一开始调用的时候出现,因为我们返回something(15px)
, 其仍留在表达式里,然而,其他人并不重视其余的表达式。
更强大的解决方案如下,定义一个名为replace()
的函数,其克隆表达式,以防止出现变化,用另外一个替换表达式的字符串值,并返回克隆的表达式。然后我们继续在表达式中替换__CALL__
,表示循环调用something()
.
replace(expr, str, val) expr = clone(expr) for e, i in expr if str == e expr[i] = val expr something(n) if current-property val = current-property[1] webkit = replace(val, '__CALL__', s('-webkit-something(%s)', n)) moz = replace(val, '__CALL__', s('-moz-something(%s)', n)) add-property(current-property[0], webkit) add-property(current-property[0], moz) s('something(%s)', n) else error('something() 必须在属性中使用')
生成:
body { foo: foo -webkit-something(5px) bar baz; foo: foo -moz-something(5px) bar baz; foo: foo something(5px) bar baz; }
无论是内部调用的使用还是调用的位置上,我们实现的方法现在是完全透明的了。这个强大概念有助于在一些私有属性使用时调用,例如渐变。
未定义方法
未定义方法一字面量形式输出。例如,我们可以在CSS中调用rgba-stop(50%, #fff)
, 其会按照你所期望的显示,我们也可以使用这些内部助手。
下面这个例子中我们简单定义了方法stop()
, 其返回了字面上rgba-stop()
调用。
stop(pos, rgba)
rgba-stop(pos, rgba)
stop(50%, orange)
// => rgba-stop(50%, #ffa500)