Stylus

English

中文
中文(张鑫旭)

English

中文
中文(张鑫旭)

外観

トップに戻る
このページについて

組み込み関数

カラー関数

red(color[, value])

指定されたcolorの赤色成分を返すか、オプションの2番目のvalue引数で赤色成分を設定します。

red(#c00)
// => 204

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

red(#c00)
// => 204

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

green(color[, value])

指定されたcolorの緑色成分を返すか、オプションの2番目のvalue引数で緑色成分を設定します。

green(#0c0)
// => 204

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

green(#0c0)
// => 204

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

blue(color[, value])

指定されたcolorの青色成分を返すか、オプションの2番目のvalue引数で青色成分を設定します。

blue(#00c)
// => 204

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

blue(#00c)
// => 204

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

alpha(color[, value])

指定されたcolorのアルファ成分を返すか、オプションの2番目のvalue引数でアルファ成分を設定します。

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が暗いかどうかを確認します。

dark(black)
// => true

dark(#005716)
// => true

dark(white)
// => false

dark(black)
// => true

dark(#005716)
// => true

dark(white)
// => false

light(color)

colorが明るいかどうかを確認します。

light(black)
// => false

light(white)
// => true

light(#00FF40)
// => true

light(black)
// => false

light(white)
// => true

light(#00FF40)
// => true

hue(color[, value])

指定されたcolorの色相を返すか、オプションの2番目のvalue引数で色相成分を設定します。

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

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

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

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

saturation(color[, value])

指定されたcolorの彩度を返すか、オプションの2番目のvalue引数で彩度成分を設定します。

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

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

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

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

lightness(color[, value])

指定されたcolorの明度を返すか、オプションの2番目のvalue引数で明度成分を設定します。

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成分値を変換します。

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成分値を変換します。

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を指定してアルファを調整します。

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表記もサポートしています。

#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ノードにキャストします。

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

rgb(#fff)
// => #fff

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)

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

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

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

darken(color, amount)

指定されたcolorをamountだけ暗くします。

この関数は単位に敏感です。たとえば、ここに示されているようにパーセンテージをサポートしています。

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

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

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

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

desaturate(color, amount)

指定されたcolorの彩度をamountだけ下げます。

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

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

saturate(color, amount)

指定されたcolorの彩度をamountだけ上げます。

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

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

complement(color)

補色を返します。色相を180deg回転させるのと同じです。

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

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

invert(color)

色を反転します。赤、緑、青の値が反転します。不透明度はそのままです。

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

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

spin(color, amount)

指定されたcolorの色相をamountだけ回転させます。

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

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

grayscale(color)

指定された色のグレースケール相当を返します。desaturate(color, 100%)と同じです。

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

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

mix(color1, color2[, amount])

2つの色を、指定された量だけ混合します。amountはオプションで、デフォルトは50%です。

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

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

tint(color, amount)

指定された色を白と混合します。

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

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

shade(color, amount)

指定された色を黒と混合します。

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

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

luminosity(color)

指定されたcolorの相対輝度を返します。

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の色が透明な場合にのみratioと異なるminおよびmax値も持ちます。その場合、errorには誤差範囲も含まれます。

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です。

第三引数はオプションで、自動検出されたアルファ値を上書きします。

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拡張子（オプション）を削除できます。

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のディレクトリ名を返します。

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

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

extname(path)

pathのファイル拡張子をドットを含めて返します。

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

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'

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

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

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

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

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

unshift(expr, args...)

指定されたargsをexprにアンシフトします。

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の（ゼロベースの）インデックスを返します。

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)

指定されたpairsのキーを返します。

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

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

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

list-separator(list)

指定されたlistの区切り文字を返します。

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])

括弧で囲まれた式はタプルとして機能する場合があります。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

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)

指定されたexprの最後の値を返します。

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の型を文字列として返します。

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を割り当てます。

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をパーセンテージに変換します。

percentage(.5)
// => 50%

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

percentage(.5)
// => 50%

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

数学関数

abs(unit) 

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

abs(5px)
// => 5px

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

abs(5px)
// => 5px

ceil(unit) 

ceil(5.5in)
// => 6in

ceil(5.5in)
// => 6in

floor(unit) 

floor(5.6px)
// => 5px

floor(5.6px)
// => 5px

round(unit) 

round(5.5px)
// => 6px

round(5.4px)
// => 5px

round(5.5px)
// => 6px

round(5.4px)
// => 5px

注意：すべての丸め関数は、オプションのprecision引数を受け入れることができます。小数点以下の保存したい桁数を渡すことができます。

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のような度単位で与えられた場合、度として扱われ、それ以外の場合はラジアンとして扱われます。

sin(30deg)
// => 0.5

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

sin(30deg)
// => 0.5

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

cos(angle)

指定されたangleのコサイン値を返します。角度が45degのような度単位で与えられた場合、度として扱われ、それ以外の場合はラジアンとして扱われます。

cos(180deg)
// => -1

cos(180deg)
// => -1

tan(angle)

指定されたangleのタンジェント値を返します。角度が45degのような度単位で与えられた場合、度として扱われ、それ以外の場合はラジアンとして扱われます。

tan(45deg)
// => 1

tan(90deg)
// => Infinity

tan(45deg)
// => 1

tan(90deg)
// => Infinity

min(a, b) 

min(1, 5)
// => 1

min(1, 5)
// => 1

max(a, b) 

max(1, 5)
// => 5

max(1, 5)
// => 5

even(unit) 

even(6px)
// => true

even(6px)
// => true

odd(unit) 

odd(5mm)
// => true

odd(5mm)
// => true

sum(nums) 

sum(1 2 3)
// => 6

sum(1 2 3)
// => 6

avg(nums) 

avg(1 2 3)
// => 2

avg(1 2 3)
// => 2

range(start, stop[, step])

指定されたstepで、startからstop（含む）までの単位のリストを返します。

step引数が省略された場合は、デフォルトで1になります。0にすることはできません。

range(1, 6)
// equals to `1..6`
// 1 2 3 4 5 6

range(1, 6, 2)
// 1 3 5

range(-6, -1, 2)
// -6 -4 -2

range(1px, 3px, 0.5px)
// 1px 1.5px 2px 2.5px 3px

range(1, 6)
// equals to `1..6`
// 1 2 3 4 5 6

range(1, 6, 2)
// 1 3 5

range(-6, -1, 2)
// -6 -4 -2

range(1px, 3px, 0.5px)
// 1px 1.5px 2px 2.5px 3px

forループで最もよく使用されます。

for i in range(10px, 50px, 10)
  .col-{i}
    width: i

for i in range(10px, 50px, 10)
  .col-{i}
    width: i

出力結果

.col-10 {
  width: 10px;
}
.col-20 {
  width: 20px;
}
.col-30 {
  width: 30px;
}
.col-40 {
  width: 40px;
}
.col-50 {
  width: 50px;
}

.col-10 {
  width: 10px;
}
.col-20 {
  width: 20px;
}
.col-30 {
  width: 30px;
}
.col-40 {
  width: 40px;
}
.col-50 {
  width: 50px;
}

base-convert(num, base, width)

提供されたbaseに変換されたLiteralのnumを、width個のゼロでパディングして返します。

幅はデフォルトで2です。

base-convert(1, 10, 3)
// => 001

base-convert(14, 16, 1)
// => e

base-convert(42, 2)
// => 101010

base-convert(1, 10, 3)
// => 001

base-convert(14, 16, 1)
// => e

base-convert(42, 2)
// => 101010

文字列関数

match(pattern, string[, flags])

string内のpattern（正規表現）のすべての一致を返します。

match('^(height|width)?([<>=]{1,})(.*)', 'height>=1024px')
// => 'height>=1024px' 'height' '>=' '1024px'

match('^foo(?:bar)?', 'foo')
// => 'foo'

match('^foo(?:bar)?', 'foobar')
// => 'foobar'

match('^foo(?:bar)?', 'bar')
// => null

match('ain', 'The rain in SPAIN stays mainly in the plain')
// => 'ain'

match('ain', 'The rain in SPAIN stays mainly in the plain', g)
// => 'ain' 'ain' 'ain'

match('ain', 'The rain in SPAIN stays mainly in the plain', 'gi')
// => 'ain' 'AIN' 'ain' 'ain'

match('^(height|width)?([<>=]{1,})(.*)', 'height>=1024px')
// => 'height>=1024px' 'height' '>=' '1024px'

match('^foo(?:bar)?', 'foo')
// => 'foo'

match('^foo(?:bar)?', 'foobar')
// => 'foobar'

match('^foo(?:bar)?', 'bar')
// => null

match('ain', 'The rain in SPAIN stays mainly in the plain')
// => 'ain'

match('ain', 'The rain in SPAIN stays mainly in the plain', g)
// => 'ain' 'ain' 'ain'

match('ain', 'The rain in SPAIN stays mainly in the plain', 'gi')
// => 'ain' 'AIN' 'ain' 'ain'

replace(pattern, replacement, val)

val文字列の、すべてのpatternの一致をreplacementで置き換えた後の文字列を返します。

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

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

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

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

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"

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'

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

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

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

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'

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)

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プロパティには、現在の関数が呼び出された関数を逆順で並べたリストが含まれます（最初の項目は最も深い関数です）。

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)))'

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

+cache(keys...)

+cacheは、独自の「キャッシュ可能な」mixinを作成できる非常に強力な組み込み関数です。

「キャッシュ可能なmixin」とは、最初の呼び出しで、その内容を指定されたセレクターに適用しますが、2回目の呼び出しで同じパラメーターを使用して、最初の呼び出しのセレクターを@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

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

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

使用されているプロパティによってセレクターがどのようにグループ化されているかを確認してください。

+prefix-classes(prefix)

Stylusには、指定されたStylusブロック内のクラスにプレフィックスを付けるために使用できるブロックmixinのprefix-classesが付属しています。例：

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

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

出力結果

.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)

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

.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

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

body {
  border: 1px solid #000;
}

operate(op, left, right)

leftとrightのオペランドに対して、指定されたopを実行します。

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

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

selector()

コンパイルされた現在のセレクターを返すか、ルートレベルで呼び出された場合は&を返します。

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

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

.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('.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

.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

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

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])

encodingでエンコードされたurl()リテラルとしてインライン画像を返します。

（利用可能なエンコーディング：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,…")

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()

something()
  add-property('bar', 1 2 3)
  s('bar')

body
  foo: something()

出力結果

body {
  bar: 1 2 3;
  foo: bar;
}

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

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

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

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

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

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

これで、実装は呼び出されるプロパティとその呼び出しの位置の両方に関して完全に透過的になりました。

この強力な概念は、グラデーションなどの関数呼び出しに対する透過的なベンダーサポートに役立ちます。

コンソール関数

warn(msg)

指定されたエラー msg で警告します。終了しません。

warn("oh noes!")

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

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)

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)

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)"
    }
}

{
    "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'

// don't throw an error if the JSON file doesn't exist
optional = json('optional.json', { hash: true, optional: true })
typeof(optional)
// => 'null'

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'

// don't throw an error if the JSON file doesn't exist
optional = json('optional.json', { hash: true, optional: true })
typeof(optional)
// => 'null'

use(path)

.styl ファイル内で use() 関数を使用して、指定された path にある任意の JS プラグインを使用できます。例：

use("plugins/add.js")

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

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;

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

RGBA、Ident、Unit などの Stylus オブジェクトを返したい場合は、次のように提供された Stylus ノードを使用できます。

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

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

ハッシュオブジェクトを使用して、オプションの第 2 引数として任意のオプションを渡すことができます。

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

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

未定義関数

未定義の関数はリテラルとして出力されます。たとえば、CSS 内で rgba-stop(50%, #fff) を呼び出すと、期待どおりに出力されます。これはヘルパー内でも使用できます。

以下の例では、リテラル rgba-stop() の呼び出しを返す関数 stop() を定義するだけです。

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

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

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

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