閱讀(520) 書簽贊(0) 我要糾錯

Stylus 內置方法

2023-09-11 15:51 更新

內置方法(Built-in Functions)

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)

是否為偶數(shù)。

even(6px)
// => true

add(unit)

是否為奇數(shù)。

odd(5mm)
// => true

sum(nums)

求和。

sum(1 2 3)
// => 6

avg(nums)

求平均數(shù)。

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節(jié)點，或h,s,l,a比重值。

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

hslaa(#ffcc00)
// => HSLA

hsla(color | h,s,l)

轉換給定color為HSLA節(jié)點，或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節(jié)點。

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節(jié)點。

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

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

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

s(fmt, …)

s()方法類似于unquote()，不過后者返回的是Literal節(jié)點，而這里起接受一個格式化的字符串，非常像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)

為表現(xiàn)一致檢測這個%字符串操作符。

operate(op, left, right)

在left和right操作對象上執(zhí)行給定的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局部變量將大放異彩，這個變量自動提供給函數(shù)體，且包含當前屬性名和值的表達式。

例如，我們使用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;
}

如果你注意上面這個例子，會發(fā)現(xiàn)bar只在一開始調用的時候出現(xiàn)，因為我們返回something(15px), 其仍留在表達式里，然而，其他人并不重視其余的表達式。

更強大的解決方案如下，定義一個名為replace()的函數(shù)，其克隆表達式，以防止出現(xiàn)變化，用另外一個替換表達式的字符串值，并返回克隆的表達式。然后我們繼續(xù)在表達式中替換__CALL__，表示循環(huán)調用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;
}

無論是內部調用的使用還是調用的位置上，我們實現(xiàn)的方法現(xiàn)在是完全透明的了。這個強大概念有助于在一些私有屬性使用時調用，例如漸變。

未定義方法

未定義方法一字面量形式輸出。例如，我們可以在CSS中調用rgba-stop(50%, #fff), 其會按照你所期望的顯示，我們也可以使用這些內部助手。

下面這個例子中我們簡單定義了方法stop(), 其返回了字面上rgba-stop()調用。

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

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

以上內容是否對您有幫助：

← Stylus 關鍵字參數(shù)

Stylus 其余參數(shù) →

寫筆記

我要補充