内置函数

颜色函数

red(color[, value])

返回给定 color 的红色分量，或将红色分量设置为可选的第二个 value 参数。

stylus

red(#c00)
// => 204

red(#000, 255)
// => #f00

red(#c00)
// => 204

red(#000, 255)
// => #f00

green(color[, value])

返回给定 color 的绿色分量，或将绿色分量设置为可选的第二个 value 参数。

stylus

green(#0c0)
// => 204

green(#000, 255)
// => #0f0

green(#0c0)
// => 204

green(#000, 255)
// => #0f0

blue(color[, value])

返回给定 color 的蓝色分量，或将蓝色分量设置为可选的第二个 value 参数。

stylus

blue(#00c)
// => 204

blue(#000, 255)
// => #00f

blue(#00c)
// => 204

blue(#000, 255)
// => #00f

alpha(color[, value])

返回给定 color 的 alpha 分量，或将 alpha 分量设置为可选的第二个 value 参数。

stylus

alpha(#fff)
// => 1

alpha(rgba(0,0,0,0.3))
// => 0.3

alpha(#fff, 0.5)
// => rgba(255,255,255,0.5)

alpha(#fff)
// => 1

alpha(rgba(0,0,0,0.3))
// => 0.3

alpha(#fff, 0.5)
// => rgba(255,255,255,0.5)

dark(color)

检查 color 是否为深色：

stylus

dark(black)
// => true

dark(#005716)
// => true

dark(white)
// => false

dark(black)
// => true

dark(#005716)
// => true

dark(white)
// => false

light(color)

检查 color 是否为浅色：

stylus

light(black)
// => false

light(white)
// => true

light(#00FF40)
// => true

light(black)
// => false

light(white)
// => true

light(#00FF40)
// => true

hue(color[, value])

返回给定 color 的色相，或将色相分量设置为可选的第二个 value 参数。

stylus

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

hue(#00c, 90deg)
// => #6c0

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

hue(#00c, 90deg)
// => #6c0

saturation(color[, value])

返回给定 color 的饱和度，或将饱和度分量设置为可选的第二个 value 参数。

stylus

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

saturation(#00c, 50%)
// => #339

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

saturation(#00c, 50%)
// => #339

lightness(color[, value])

返回给定 color 的亮度，或将亮度分量设置为可选的第二个 value 参数。

stylus

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

lightness(#00c, 80%)
// => #99f

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

lightness(#00c, 80%)
// => #99f

hsla(color | h,s,l,a)

将给定的 color 转换为 HSLA 节点，或转换 h,s,l,a 分量值。

stylus

hsla(10deg, 50%, 30%, 0.5)
// => HSLA

hsla(#ffcc00)
// => HSLA

hsla(10deg, 50%, 30%, 0.5)
// => HSLA

hsla(#ffcc00)
// => HSLA

hsl(color | h,s,l)

将给定的 color 转换为 HSLA 节点，或转换 h,s,l,a 分量值。

stylus

hsl(10, 50, 30)
// => HSLA

hsl(#ffcc00)
// => HSLA

hsl(10, 50, 30)
// => HSLA

hsl(#ffcc00)
// => HSLA

rgba(color | r,g,b,a)

从 r,g,b,a 通道返回 RGBA，或提供一个 color 来调整 alpha。

stylus

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)

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 表示法：

stylus

#fc08
// => rgba(255,204,0,0.5)

#ffcc00ee
// => rgba(255,204,0,0.9)

#fc08
// => rgba(255,204,0,0.5)

#ffcc00ee
// => rgba(255,204,0,0.9)

rgb(color | r,g,b)

从 r,g,b 通道返回一个 RGBA，或转换为 RGBA 节点。

stylus

rgb(255,204,0)
// => #ffcc00

rgb(#fff)
// => #fff

rgb(255,204,0)
// => #ffcc00

rgb(#fff)
// => #fff

blend(top[, bottom])

使用正常混合方式将给定的 top 颜色混合到 bottom 颜色上。bottom 参数是可选的，默认为 #fff。

stylus

blend(rgba(#FFF, 0.5), #000)
// => #808080

blend(rgba(#FFDE00,.42), #19C261)
// => #7ace38

blend(rgba(lime, 0.5), rgba(red, 0.25))
// => rgba(128,128,0,0.625)

blend(rgba(#FFF, 0.5), #000)
// => #808080

blend(rgba(#FFDE00,.42), #19C261)
// => #7ace38

blend(rgba(lime, 0.5), rgba(red, 0.25))
// => rgba(128,128,0,0.625)

lighten(color, amount)

使给定的 color 变亮 amount。

这个函数对单位敏感；它支持百分比，如下所示：

stylus

lighten(#2c2c2c, 30)
// => #787878

lighten(#2c2c2c, 30%)
// => #393939

lighten(#2c2c2c, 30)
// => #787878

lighten(#2c2c2c, 30%)
// => #393939

darken(color, amount)

使给定的 color 变暗 amount。

这个函数对单位敏感；它支持百分比，如下所示：

stylus

darken(#D62828, 30)
// => #551010

darken(#D62828, 30%)
// => #961c1c

darken(#D62828, 30)
// => #551010

darken(#D62828, 30%)
// => #961c1c

desaturate(color, amount)

降低给定 color 的饱和度 amount。

stylus

desaturate(#f00, 40%)
// => #c33

desaturate(#f00, 40%)
// => #c33

saturate(color, amount)

提高给定 color 的饱和度 amount。

stylus

saturate(#c33, 40%)
// => #f00

saturate(#c33, 40%)
// => #f00

complement(color)

给出互补色。相当于将色相旋转 180deg。

stylus

complement(#fd0cc7)
// => #0cfd42

complement(#fd0cc7)
// => #0cfd42

invert(color)

反转颜色。红、绿、蓝值被反转。不改变不透明度。

stylus

invert(#d62828)
// => #29d7d7

invert(#d62828)
// => #29d7d7

spin(color, amount)

将给定 color 的色相旋转 amount。

stylus

spin(#ff0000, 90deg)
// => #80ff00

spin(#ff0000, 90deg)
// => #80ff00

grayscale(color)

给出给定颜色的灰度等效值。相当于 desaturate(color, 100%)。

stylus

grayscale(#fd0cc7)
// => #0cfd42

grayscale(#fd0cc7)
// => #0cfd42

mix(color1, color2[, amount])

按给定的 amount 混合两种颜色。amount 是可选的，默认为 50%。

stylus

mix(#000, #fff, 30%)
// => #b2b2b2

mix(#000, #fff, 30%)
// => #b2b2b2

tint(color, amount)

将给定颜色与白色混合。

stylus

tint(#fd0cc7,66%)
// => #feaceb

tint(#fd0cc7,66%)
// => #feaceb

shade(color, amount)

将给定颜色与黑色混合。

stylus

shade(#fd0cc7,66%)
// => #560443

shade(#fd0cc7,66%)
// => #560443

luminosity(color)

返回给定 color 的相对亮度。

stylus

luminosity(white)
// => 1

luminosity(#000)
// => 0

luminosity(red)
// => 0.2126

luminosity(white)
// => 1

luminosity(#000)
// => 0

luminosity(red)
// => 0.2126

contrast(top[, bottom])

返回 top 和 bottom 颜色之间的对比度比率对象，基于 Lea Verou 的对比度比率工具底层脚本。

第二个参数是可选的，默认为 #fff。

返回对象的主要键是 ratio，当 bottom 颜色是透明的时候，它还有 min 和 max 值，这些值与 ratio 不同。在这种情况下，error 还包含一个误差边距。

stylus

contrast(#000, #fff).ratio
// => 21
contrast(#000, rgba(#FFF, 0.5))
// => { "ratio": "13.15;", "error": "-7.85", "min": "5.3", "max": "21" }

contrast(#000, #fff).ratio
// => 21
contrast(#000, rgba(#FFF, 0.5))
// => { "ratio": "13.15;", "error": "-7.85", "min": "5.3", "max": "21" }

transparentify(top[, bottom, alpha])

返回给定 top 颜色的透明版本，就像它是混合在给定的 bottom 颜色上一样（或者尽可能接近）。

第二个参数是可选的，默认为 #fff。

第三个参数是可选的，并覆盖自动检测的 alpha 值。

stylus

transparentify(#808080)
// => rgba(0,0,0,0.5)

transparentify(#414141, #000)
// => rgba(255,255,255,0.25)

transparentify(#91974C, #F34949, 0.5)
// => rgba(47,229,79,0.5)

transparentify(#808080)
// => rgba(0,0,0,0.5)

transparentify(#414141, #000)
// => rgba(255,255,255,0.25)

transparentify(#91974C, #F34949, 0.5)
// => rgba(47,229,79,0.5)

路径函数

basename(path[, ext])

返回 path 的基本名称，（可选）移除 ext 扩展名。

stylus

basename('images/foo.png')
// => "foo.png"

basename('images/foo.png', '.png')
// => "foo"

basename('images/foo.png')
// => "foo.png"

basename('images/foo.png', '.png')
// => "foo"

dirname(path)

返回 path 的目录名。

stylus

dirname('images/foo.png')
// => "images"

dirname('images/foo.png')
// => "images"

extname(path)

返回 path 的文件扩展名，包括点。

stylus

extname('images/foo.png')
// => ".png"

extname('images/foo.png')
// => ".png"

pathjoin(...)

执行路径连接。

stylus

pathjoin('images', 'foo.png')
// => "images/foo.png"

path = 'images/foo.png'
ext = extname(path)
pathjoin(dirname(path), basename(path, ext) + _thumb + ext)
// => 'images/foo_thumb.png'

pathjoin('images', 'foo.png')
// => "images/foo.png"

path = 'images/foo.png'
ext = extname(path)
pathjoin(dirname(path), basename(path, ext) + _thumb + ext)
// => 'images/foo_thumb.png'

列表 / 哈希函数

push(expr, args...)

将给定的 args 推入 expr。

stylus

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

nums
// => 1 2 3 4 5

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

nums
// => 1 2 3 4 5

别名为 append()。

pop(expr)

从 expr 中弹出一个值。

stylus

nums = 4 5 3 2 1
num = pop(nums)

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

nums = 4 5 3 2 1
num = pop(nums)

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

shift(expr)

从 expr 中移除一个元素。

stylus

nums = 4 5 3 2 1
num = shift(nums)

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

nums = 4 5 3 2 1
num = shift(nums)

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

unshift(expr, args...)

将给定的 args 添加到 expr 的开头。

stylus

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

nums
// => 1 2 3 4 5

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

nums
// => 1 2 3 4 5

别名为 prepend()。

index(list, value)

返回 list 中 value 的（从零开始的）索引。

stylus

list = 1 2 3

index(list, 2)
// => 1

index(1px solid red, red)
// => 2

list = 1 2 3

index(list, 2)
// => 1

index(1px solid red, red)
// => 2

keys(pairs)

返回给定哈希或对的键。

stylus

pairs = (one: 1, two: 2)
keys(pairs)
// => 'one' 'two'

pairs = (one: 1, two: 2)
keys(pairs)
// => 'one' 'two'

values(pairs)

Return values in the given pairs:

stylus

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

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

list-separator(list)

Return the separator of the given list.

stylus

list1 = a b c
list-separator(list1)
// => ' '

list2 = a, b, c
list-separator(list2)
// => ','

list1 = a b c
list-separator(list1)
// => ' '

list2 = a, b, c
list-separator(list2)
// => ','

length([expr])

Parenthesized expressions may act as tuples, the length() function returns the length of such expressions.

stylus

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

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

last(expr)

Return the last value in the given expr:

stylus

nums = 1 2 3
last(nums)
last(1 2 3)
// => 3

list = (one 1) (two 2) (three 3)
last(list)
// => (three 3)

nums = 1 2 3
last(nums)
last(1 2 3)
// => 3

list = (one 1) (two 2) (three 3)
last(list)
// => (three 3)

单位函数

typeof(node)

返回 node 的类型作为字符串。

stylus

type(12)
// => 'unit'

typeof(12)
// => 'unit'

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

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

type(12)
// => 'unit'

typeof(12)
// => 'unit'

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

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

别名为 type-of 和 type。

unit(val[, type])

返回 val 的单位类型的字符串，或者为空字符串，或者在不转换单位的情况下分配给定的 type。

stylus

unit(10)
// => ''

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

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

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

unit(10)
// => ''

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

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

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

percentage(num)

将 num 转换为百分比。

stylus

percentage(.5)
// => 50%

percentage(4 / 100)
// => 4%

percentage(.5)
// => 50%

percentage(4 / 100)
// => 4%

数学函数

abs(unit)

stylus

abs(-5px)
// => 5px

abs(5px)
// => 5px

abs(-5px)
// => 5px

abs(5px)
// => 5px

ceil(unit)

stylus

ceil(5.5in)
// => 6in

ceil(5.5in)
// => 6in

floor(unit)

stylus

floor(5.6px)
// => 5px

floor(5.6px)
// => 5px

round(unit)

stylus

round(5.5px)
// => 6px

round(5.4px)
// => 5px

round(5.5px)
// => 6px

round(5.4px)
// => 5px

注意： 所有舍入函数都可以接受可选的 precision 参数 — 你可以传递要在小数点后保留的数字位数：

stylus

ceil(5.52px,1)
// => 5.6px

floor(5.57px,1)
// => 5.5px

round(5.52px,1)
// => 5.5px

ceil(5.52px,1)
// => 5.6px

floor(5.57px,1)
// => 5.5px

round(5.52px,1)
// => 5.5px

sin(angle)

返回给定 angle 的正弦值。如果角度以度为单位给出，如 45deg，则被视为度，否则被视为弧度。

stylus

sin(30deg)
// => 0.5

sin(3*PI/4)
// => 0.707106781

sin(30deg)
// => 0.5

sin(3*PI/4)
// => 0.707106781

cos(angle)

返回给定 angle 的余弦值。如果角度以度为单位给出，如 45deg，则被视为度，否则被视为弧度。

stylus

cos(180deg)
// => -1

cos(180deg)
// => -1

tan(angle)

返回给定 angle 的正切值。如果角度以度为单位给出，如 45deg，则被视为度，否则被视为弧度。

stylus

tan(45deg)
// => 1

tan(90deg)
// => Infinity

tan(45deg)
// => 1

tan(90deg)
// => Infinity

min(a, b)

stylus

min(1, 5)
// => 1

min(1, 5)
// => 1

max(a, b)

stylus

max(1, 5)
// => 5

max(1, 5)
// => 5

even(unit)

stylus

even(6px)
// => true

even(6px)
// => true

odd(unit)

stylus

odd(5mm)
// => true

odd(5mm)
// => true

sum(nums)

stylus

sum(1 2 3)
// => 6

sum(1 2 3)
// => 6

avg(nums)

stylus

avg(1 2 3)
// => 2

avg(1 2 3)
// => 2

range(start, stop[, step])

返回从 start 到 stop 的单位列表

内置函数 ​

颜色函数 ​

red(color[, value]) ​

green(color[, value]) ​

blue(color[, value]) ​

alpha(color[, value]) ​

dark(color) ​

light(color) ​

hue(color[, value]) ​

saturation(color[, value]) ​

lightness(color[, value]) ​

hsla(color | h,s,l,a) ​

hsl(color | h,s,l) ​

rgba(color | r,g,b,a) ​

rgb(color | r,g,b) ​

blend(top[, bottom]) ​

lighten(color, amount) ​

darken(color, amount) ​

desaturate(color, amount) ​

saturate(color, amount) ​

complement(color) ​

invert(color) ​

spin(color, amount) ​

grayscale(color) ​

mix(color1, color2[, amount]) ​

tint(color, amount) ​

shade(color, amount) ​

luminosity(color) ​

contrast(top[, bottom]) ​

transparentify(top[, bottom, alpha]) ​

路径函数 ​

basename(path[, ext]) ​

dirname(path) ​

extname(path) ​

pathjoin(...) ​

列表 / 哈希函数 ​

push(expr, args...) ​

pop(expr) ​

shift(expr) ​

unshift(expr, args...) ​

index(list, value) ​

keys(pairs) ​

values(pairs) ​

list-separator(list) ​

length([expr]) ​

last(expr) ​

单位函数 ​

typeof(node) ​

unit(val[, type]) ​

percentage(num) ​

数学函数 ​

abs(unit) ​

ceil(unit) ​

floor(unit) ​

round(unit) ​

sin(angle) ​

cos(angle) ​

tan(angle) ​

min(a, b) ​

max(a, b) ​

even(unit) ​

odd(unit) ​

sum(nums) ​

avg(nums) ​

range(start, stop[, step]) ​

内置函数

颜色函数

red(color[, value])

green(color[, value])

blue(color[, value])

alpha(color[, value])

dark(color)

light(color)

hue(color[, value])

saturation(color[, value])

lightness(color[, value])

hsla(color | h,s,l,a)

hsl(color | h,s,l)

rgba(color | r,g,b,a)

rgb(color | r,g,b)

blend(top[, bottom])

lighten(color, amount)

darken(color, amount)

desaturate(color, amount)

saturate(color, amount)

complement(color)

invert(color)

spin(color, amount)

grayscale(color)

mix(color1, color2[, amount])

tint(color, amount)

shade(color, amount)

luminosity(color)

contrast(top[, bottom])

transparentify(top[, bottom, alpha])

路径函数

basename(path[, ext])

dirname(path)

extname(path)

pathjoin(...)

列表 / 哈希函数

push(expr, args...)

pop(expr)

shift(expr)

unshift(expr, args...)

index(list, value)

keys(pairs)

values(pairs)

list-separator(list)

length([expr])

last(expr)

单位函数

typeof(node)

unit(val[, type])

percentage(num)

数学函数

abs(unit)

ceil(unit)

floor(unit)

round(unit)

sin(angle)

cos(angle)

tan(angle)

min(a, b)

max(a, b)

even(unit)

odd(unit)

sum(nums)

avg(nums)

range(start, stop[, step])