跳到主要内容

内置函数

颜色函数​

red(color[, value])​

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

red(#c00)
// => 204

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

green(color[, value])​

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

green(#0c0)
// => 204

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

blue(color[, value])​

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

blue(#00c)
// => 204

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

alpha(color[, value])​

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

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 是否为暗色：

dark(black)
// => true

dark(#005716)
// => true

dark(white)
// => false

light(color)​

检查 color 是否为亮色：

light(black)
// => false

light(white)
// => true

light(#00FF40)
// => true

hue(color[, value])​

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

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

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

saturation(color[, value])​

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

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

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

lightness(color[, value])​

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

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

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

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

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

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

hsla(#ffcc00)
// => HSLA

hsl(color | h,s,l)​

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

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

hsl(#ffcc00)
// => HSLA

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

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

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)

Alternatively, 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

blend(top[, bottom])​

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

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。

此函数支持单位敏感性；例如，如下所示，它支持百分比：

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

complement(color)​

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

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

invert(color)​

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

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

spin(color, amount)​

将给定的color色相旋转amount。

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

grayscale(color)​

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

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

mix(color1, color2[, amount])​

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

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

tint(color, amount)​

将给定的颜色与白色混合。

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

shade(color, amount)​

将给定的颜色与黑色混合。

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

luminosity(color)​

返回给定color的相对亮度。

将代码语言 Stylus 的英文文本翻译成中文，相关的专有名词不做翻译：

luminosity(white)
// => 1

luminosity(#000)
// => 0

luminosity(red)
// => 0.2126

luminosity() 函数返回颜色的亮度值，取值范围为 0 到 1。

contrast(top[, bottom])​

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

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

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

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。

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 扩展名。

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

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

dirname(path)​

返回 path 的目录名。

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

extname(path)​

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

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

pathjoin(...)​

执行路径连接。

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。

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

nums
// => 1 2 3 4 5

别名为 append()。

pop(expr)​

从 expr 弹出一个值。

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

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

shift(expr)​

从 expr 中移除一个元素。

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

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

角度值，返回该角度的正弦值。如果角度以弧度值给出，则使用sinr()函数。

sin(30deg)
// => 0.5

sin(0.5)
// => 0.4794255386

cos(angle)​

Returns the value of cosine for the given angle. If the angle is given as a degree value, returns the cosine of that angle. If the angle is given as a radian value, use the cosr() function.

cos(60deg)
// => 0.5

cos(0.5)
// => 0.8775825619

tan(angle)​

Returns the value of tangent for the given angle. If the angle is given as a degree value, returns the tangent of that angle. If the angle is given as a radian value, use the tanr() function.

tan(45deg)
// => 1

tan(1)
// => 1.5574077247

atan(val)​

Returns the arctangent of val.

atan(1)
// => 0.7853981634

atan2(y, x)​

Returns the arctangent of y/x.

atan2(1, 1)
// => 0.7853981634

sqrt(val)​

Returns the square root of val.

sqrt(16)
// => 4

pow(base, exp)​

Returns base raised to the power of exp.

pow(2, 3)
// => 8

log(val)​

Returns the natural logarithm of val.

log(10)
// => 2.302585093

pi()​

Returns the value of π.

pi()
// => 3.1415926536

e()​

Returns the value of e.

e()
// => 2.7182818285

Color Functions​

rgba(r, g, b, a)​

Create an RGBA color with the given values.

rgba(255, 0, 0, 0.5)
// => rgba(255, 0, 0, 0.5)

rgb(r, g, b)​

Create an RGB color with the given values.

rgb(255, 0, 0)
// => rgb(255, 0, 0)

hsla(h, s, l, a)​

Create an HSLA color with the given values.

hsla(120, 100%, 50%, 0.5)
// => hsla(120, 100%, 50%, 0.5)

hsl(h, s, l)​

Create an HSL color with the given values.

hsl(120, 100%, 50%)
// => hsl(120, 100%, 50%)

hue(color)​

Returns the hue component of a color.

hue(#f00)
// => 0deg

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

saturation(color)​

Returns the saturation component of a color.

saturation(#f00)
// => 100%

saturation(hsl(120, 100%, 50%))
// => 100%

lightness(color)​

Returns the lightness component of a color.

lightness(#f00)
// => 50%

lightness(hsl(120, 100%, 50%))
// => 50%

alpha(color)​

Returns the alpha component of a color.

alpha(rgba(255, 0, 0, 0.5))
// => 0.5

luminance(color)​

Returns the luminance of a color.

luminance(#000)
// => 0

luminance(#fff)
// => 1

luminance(#f00)
// => 0.2126

mix(color1, color2[, weight])​

Mixes two colors together. The optional weight argument specifies the weight of the first color (default: 50%).

mix(#f00, #00f)
// => #7f007f

mix(#f00, #00f, 25%)
// => #3f00bf

saturate(color, amount)​

Saturates a color by the given amount.

saturate(#f00, 50%)
// => #ff1a1a

desaturate(color, amount)​

Desaturates a color by the given amount.

desaturate(#f00, 50%)
// => #804d4d

lighten(color, amount)​

Lightens a color by the given amount.

lighten(#f00, 50%)
// => #ff8080

darken(color, amount)​

Darkens a color by the given amount.

darken(#f00, 50%)
// => #800000

fadein(color, amount)​

Increases the alpha component of a color by the given amount.

fadein(rgba(255, 0, 0, 0.5), 0.2)
// => rgba(255, 0, 0, 0.7)

fadeout(color, amount)​

Decreases the alpha component of a color by the given amount.

fadeout(rgba(255, 0, 0, 0.5), 0.2)
// => rgba(255, 0, 0, 0.3)

invert(color)​

Inverts a color.

invert(#f00)
// => #00ff00

complement(color)​

Returns the complement of a color.

complement(#f00)
// => #00ffff

grayscale(color)​

Converts a color to grayscale.

grayscale(#f00)
// => #808080

contrast(color1, color2)​

Returns the contrast ratio between two colors.

contrast(#000, #fff)
// => 21

contrast(#f00, #00f)
// => 1.6

tint(color, amount)​

Tints a color by the given amount.

tint(#f00, 50%)
// => #ff8080

shade(color, amount)​

Shades a color by the given amount.

shade(#f00, 50%)
// => #800000

adjust-hue(color, degrees)​

Adjusts the hue of a color by the given degrees.

adjust-hue(#f00, 60deg)
// => #80ff00

saturate(color, amount)​

Saturates a color by the given amount.

saturate(#f00, 50%)
// => #ff1a1a

desaturate(color, amount)​

Desaturates a color by the given amount.

desaturate(#f00, 50%)
// => #804d4d

lighten(color, amount)​

Lightens a color by the given amount.

lighten(#f00, 50%)
// => #ff8080

darken(color, amount)​

Darkens a color by the given amount.

darken(#f00, 50%)
// => #800000

fadein(color, amount)​

Increases the alpha component of a color by the given amount.

fadein(rgba(255, 0, 0, 0.5), 0.2)
// => rgba(255, 0, 0, 0.7)

fadeout(color, amount)​

Decreases the alpha component of a color by the given amount.

fadeout(rgba(255, 0, 0, 0.5), 0.2)
// => rgba(255, 0, 0, 0.3)

invert(color)​

Inverts a color.

invert(#f00)
// => #00ff00

complement(color)​

Returns the complement of a color.

complement(#f00)
// => #00ffff

grayscale(color)​

Converts a color to grayscale.

grayscale(#f00)
// => #808080

contrast(color1, color2)​

Returns the contrast ratio between two colors.

contrast(#000, #fff)
// => 21

contrast(#f00, #00f)
// => 1.6

tint(color, amount)​

Tints a color by the given amount.

tint(#f00, 50%)
// => #ff8080

shade(color, amount)​

Shades a color by the given amount.

shade(#f00, 50%)
// => #800000

adjust-hue(color, degrees)​

Adjusts the hue of a color by the given degrees.

adjust-hue(#f00, 60deg)
// => #80ff00

saturate(color, amount)​

Saturates a color by the given amount.

saturate(#f00, 50%)
// => #ff1a1a

desaturate(color, amount)​

Desaturates a color by the given amount.

desaturate(#f00, 50%)
// => #804d4d

lighten(color, amount)​

Lightens a color by the given amount.

lighten(#f00, 50%)
// => #ff8080

darken(color, amount)​

Darkens a color by the given amount.

darken(#f00, 50%)
// => #800000

fadein(color, amount)​

Increases the alpha component of a color by the given amount.

fadein(rgba(255, 0, 0, 0.5), 0.2)
// => rgba(255, 0, 0, 0.7)

fadeout(color, amount)​

Decreases the alpha component of a color by the given amount.

fadeout(rgba(255, 0, 0, 0.5), 0.2)
// => rgba(255, 0, 0, 0.3)

invert(color)​

Inverts a color.

invert(#f00)
// => #00ff00

complement(color)​

Returns the complement of a color.

complement(#f00)
// => #00ffff

grayscale(color)​

Converts a color to grayscale.

grayscale(#f00)
// => #808080

contrast(color1, color2)​

Returns the contrast ratio between two colors.

contrast(#000, #fff)
// => 21

contrast(#f00, #00f)
// => 1.6

tint(color, amount)​

Tints a color by the given amount.

tint(#f00, 50%)
// => #ff8080

shade(color, amount)​

Shades a color by the given amount.

shade(#f00, 50%)
// => #800000

adjust-hue(color, degrees)​

Adjusts the hue of a color by the given degrees.

adjust-hue(#f00, 60deg)
// => #80ff00

saturate(color, amount)​

Saturates a color by the given amount.

saturate(#f00, 50%)
// => #ff1a1a

desaturate(color, amount)​

Desaturates a color by the given amount.

desaturate(#f00, 50%)
// => #804d4d

lighten(color, amount)​

Lightens a color by the given amount.

lighten(#f00, 50%)
// => #ff8080

darken(color, amount)​

Darkens a color by the given amount.

darken(#f00, 50%)
// => #800000

fadein(color, amount)​

Increases the alpha component of a color by the given amount.

fadein(rgba(255, 0, 0, 0.5), 0.2)
// => rgba(255, 0, 0, 0.7)

fadeout(color, amount)​

Decreases the alpha component of a color by the given amount.

fadeout(rgba(255, 0, 0, 0.5), 0.2)
// => rgba(255, 0, 0, 0.3)

invert(color)​

Inverts a color.

invert(#f00)
// => #00ff00

complement(color)​

Returns the complement of a color.

complement(#f00)
// => #00ffff

grayscale(color)​

Converts a color to grayscale.

grayscale(#f00)
// => #808080

contrast(color1, color2)​

Returns the contrast ratio between two colors.

contrast(#000, #fff)
// => 21

contrast(#f00, #00f)
// => 1.6

tint(color, amount)​

Tints a color by the given amount.

tint(#f00, 50%)
// => #ff8080

shade(color, amount)​

Shades a color by the given amount.

用指定的 replacement 替换其中匹配到的 pattern（正则表达式）。

replace('foo', 'bar', 'foobar')
// => 'barbar'

replace('(\w+)\s(\w+)', '$2 $1', 'John Smith')
// => 'Smith John'

split(separator, string[, limit])​

Returns a list of substrings of string split by separator.

split(',', 'a,b,c')
// => 'a' 'b' 'c'

split(' ', 'The quick brown fox jumps over the lazy dog')
// => 'The' 'quick' 'brown' 'fox' 'jumps' 'over' 'the' 'lazy' 'dog'

split(' ', 'The quick brown fox jumps over the lazy dog', 4)
// => 'The' 'quick' 'brown' 'fox jumps over the lazy dog'

join(separator, list)​

Returns a string of elements in list joined by separator.

join(',', 'a' 'b' 'c')
// => 'a,b,c'

join(' ', 'The' 'quick' 'brown' 'fox' 'jumps' 'over' 'the' 'lazy' 'dog')
// => 'The quick brown fox jumps over the lazy dog'

length(val)​

Returns the length of val.

length('hello')
// => 5

length('你好')
// => 2

length('hello, 你好')
// => 9

substr(val, start[, length])​

Returns a substring of val starting from start index and optionally with length characters.

substr('hello', 1)
// => 'ello'

substr('hello', 1, 2)
// => 'el'

to-upper-case(val)​

Returns val with all characters converted to uppercase.

to-upper-case('hello')
// => 'HELLO'

to-lower-case(val)​

Returns val with all characters converted to lowercase.

to-lower-case('HELLO')
// => 'hello'

unquote(val)​

Removes quotes from val.

unquote('hello')
// => hello

unquote('"hello"')
// => hello

用replacement替换所有pattern匹配项。

replace(i, e, 'griin')
// => 'green'

replace(i, e, griin)
// => #008000

join(delim, vals...)​

使用delim连接给定的vals。

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"

split(delim, val)​

split()方法将字符串或标识符按照分隔符分成字符串列表。

split(_, bar1_bar2_bar3)
// => bar1 bar2 bar3

split(_, 'bar1_bar2_bar3')
// => 'bar1' 'bar2' 'bar3'

substr(val, start, length)​

substr()方法返回从指定位置开始到指定数量的字符的字符串。

substr(ident, 1, 2)
// => de

substr('string', 1, 2)
// => 'tr'

val = dredd
substr(substr(val, 1), 0, 3)
// => #f00

slice(val, start[, end])​

slice()方法提取字符串/列表的一部分并返回一个新的字符串/列表。

slice('lorem' 'ipsum' 'dolor', 1, 2)
slice('lorem' 'ipsum' 'dolor', 1, -1)
// => 'ipsum'

slice('lorem ipsum', 1, 5)
// => 'orem'
slice(rredd, 1, -1)
// => #f00

slice(1px solid black, 1)
// => solid #000

unquote(str | ident)​

取消引用给定的str，并将其作为Literal节点返回。

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

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

unquote('1px / 2px')
// => 1px / 2px

convert(str)​

类似于unquote()，但尝试将给定的str转换为 Stylus 节点。

unit = convert('40px')
typeof(unit)
// => 'unit'

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

foo = convert('foo')
typeof(foo)
// => 'ident'

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)

查看%字符串操作符以获得等效行为。

实用函数​

called-from属性​

called-from属性包含当前函数被哪些函数调用的列表。

将代码语言 Stylus 的英文文本翻译成中文，相关的专有名词不做翻译：

called from in reverse order (the first item is the deepest function).

foo()
  bar()

bar()
  baz()

baz()
  return called-from

foo()
// => bar foo

从深度函数开始，以相反的顺序调用（第一个项目是最深的函数）。

foo()
  bar()

bar()
  baz()

baz()
  return called-from

foo()
// => bar foo

current-media()​

current-media() 函数返回当前块的 @media 规则的字符串（如果块上方没有 @media，则返回 ''）。

@media only screen and (min-width: 1024px)
  current-media()
// => '@media (only screen and (min-width: (1024px)))'

+cache(keys...)​

+cache 是一个非常强大的内置函数，允许您创建自己的“可缓存” mixin。

“可缓存 mixin” 是指在第一次调用时将其内容应用于给定的选择器，但在第二次调用时使用相同的参数 @extend 第一次调用的选择器。

size($width, $height = $width)
  +cache('w' + $width)
    width: $width
  +cache('h' + $height)
    height: $height

.a
  size: 10px 20px
.b
  size: 10px 2em
.c
  size: 1px 2em

将产生以下结果：

.a,
.b {
  width: 10px;
}
.a {
  height: 20px;
}
.b,
.c {
  height: 2em;
}
.c {
  width: 1px;
}

请注意，选择器是按使用的属性分组在一起的。

+prefix-classes(prefix)​

Stylus 带有一个块 mixin prefix-classes，可用于为任何给定的 Stylus 块内的类添加前缀。例如：

+prefix-classes('foo-')
  .bar
    width: 10px

产生：

.foo-bar {
  width: 10px;
}

lookup(name)​

允许查找名为 name 的变量的值，以字符串形式传递。 如果变量未定义，则返回 null。

在需要动态生成名称的变量的值时非常有用：

font-size-1 = 10px
font-size-2 = 20px
font-size-3 = 30px

for i in 1..3
  .text-{i}
    font-size: lookup('font-size-' + i)

产生：

.text-1 {
  font-size: 10px;
}
.text-2 {
  font-size: 20px;
}
.text-3 {
  font-size: 30px;
}

define(name, expr[, global])​

允许创建或覆盖具有给定名称 name 的变量（以字符串形式传递）到当前作用域（如果 global 为 true，则为全局作用域）。

在需要变量名称内插值的情况下，此 BIF 可能很有用：

prefix = 'border'
border = { color: #000, length: 1px, style: solid }

for prop, val in border
  define(prefix + '-' + prop, val)

body
  border: border-length border-style border-color

产生：

body {
  border: 1px solid #000;
}

operate(op, left, right)​

执行给定操作符 op 的操作，左操作数为 left，右操作数为 right。支持的操作符包括 +、-、*、/、%、==、!=、>、>=、< 和 <=。

operate('+', 1, 2) // => 3
operate('*', 2, 3) // => 6
operate('==', 1, 2) // => false
operate('>', 2, 1) // => true

type-of(expr)​

返回表达式 expr 的类型，以字符串形式返回。支持的类型包括 string、number、unit、color、boolean、null、list、map 和 function。

type-of('foo') // => 'string'
type-of(42) // => 'number'
type-of(10px) // => 'unit'
type-of(#fff) // => 'color'
type-of(true) // => 'boolean'
type-of(null) // => 'null'
type-of(1 2 3) // => 'list'
type-of(a: 1, b: 2) // => 'map'
type-of(foo()) // => 'function'

将代码语言 Stylus 的英文文本翻译成中文，相关的专有名词不做翻译：

ven op on the left and right operands:

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

在左操作数和右操作数上执行 op。

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

selector()​

返回当前选择器的编译结果，如果在根级别调用，则返回 &。

.foo
  selector()
// => '.foo'

.foo
  &:hover
    selector()
// '.foo:hover'

selector-exists(selector)​

如果 selector 存在，则返回 true。

.foo
  color red

  a
    font-size 12px

selector-exists('.foo') // true
selector-exists('.foo a') // true
selector-exists('.foo li') // false
selector-exists('.bar') // false

该方法不考虑当前上下文的意义：

.foo
  color red

  a
    font-size 12px

  selector-exists('a') // false
  selector-exists(selector() + ' a') // true

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

embedurl(path[, encoding])​

返回一个内联图像作为 url() 文本，使用 encoding 进行编码。

（可用编码：base64（默认）和 utf8）。

background: embedurl('logo.png')
// => background: url("data:image/png;base64,…")

background: embedurl('logo.svg', 'utf8')
// => background: url("data:image/svg+xml;charset=utf-8,…")

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

接下来，"magic" 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，我们可以进一步完善我们的示例，并复制属性 w

使用新值的函数，并使用条件语句确保该函数仅在属性值内使用。

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() must be used within a property')

body
  foo: something(5px) bar baz

输出：

body {
  foo: -webkit-something(5px) bar baz;
  foo: -moz-something(5px) bar baz;
  foo: something(5px) bar baz;
}

我们的实现现在完全透明，无论是调用它的属性还是调用的位置。

这个强大的概念有助于函数调用的透明供应商支持，例如渐变。

控制台函数​

warn(msg)​

使用给定的错误 msg 进行警告。不退出。

warn("oh noes!")

error(msg)​

使用给定的错误 msg 退出 Stylus。

add(a, b)
  unless a is a 'unit' and b is a 'unit'
    error('add() expects units')
  a + b

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)

stdout：

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)

外部文件函数​

json(path[, options])​

将位于 path 的 JSON 文件转换为 Stylus 变量或对象。嵌套变量对象键使用破折号（-）连接。

例如，以下示例 media-queries.json 文件：

{
  "small": "screen and (max-width:400px)",
  "tablet": {
    "landscape": "screen and (min-width:600px) and (orientation:landscape)",
    "portrait": "screen and (min-width:600px) and (orientation:portrait)"
  }
}

可以这样使用：

json('media-queries.json')

@media small
// => @media screen and (max-width:400px)

@media tablet-landscape
// => @media screen and (min-width:600px) and (orientation:landscape)

vars = json('vars.json', { hash: true })
body
  width: vars.width

vars = json('vars.json', { hash: true, leave-strings: true })
typeof(vars.icon)
// => 'string'

// 如果 JSON 文件不存在，则不会抛出错误
optional = json('optional.json', { hash: true, optional: true })
typeof(optional)
// => 'null'

use(path)​

您可以使用 use() 函数在 .styl 文件中使用任何 JS 插件，例如：

use("plugins/add.js")

width add(10, 100)
// => width: 110

在这种情况下，add.js 插件如下所示：

var plugin = function () {
  return function (style) {
    style.define("add", function (a, b) {
      return a.operate("+", b);
    });
  };
};
module.exports = plugin;

如果您想返回任何 Stylus 对象，例如 RGBA、Ident 或 Unit，可以使用提供的 Stylus 节点，例如：

var plugin = function () {
  return function (style) {
    var nodes = this.nodes;
    style.define("something", function () {
      return new nodes.Ident("foobar");
    });
  };
};
module.exports = plugin;

您可以使用 哈希对象 将任何选项作为可选的第二个参数传递：

use("plugins/add.js", { foo: bar });

未定义的函数​

未定义的函数将作为文字输出。例如，我们可以在 css 中调用 rgba-stop(50%, #fff)，它将按预期输出。我们也可以在助手中使用它。

在下面的示例中，我们只是定义了函数 stop()，它返回文字 rgba-stop() 调用。

stop(pos, rgba)
  rgba-stop(pos, rgba)

stop(50%, orange)
// => rgba-stop(50%, #ffa500)