L3F.WIN

Github及Hexo的使用

0%

学习stylus【5】Stylue内置方法

发表于 更新于 分类于

Stylue内置方法
red(color)
返回color中的红色比重

1
red(#c00)  => 204

green(color)
返回color中的绿色比重。

1
green(#c00)  => 204

blue(color)
返回color中的蓝色比重。

1
blue(#c00)  => 204

alpha(color)
返回color中的透明度比重

1
2
3
4
5
alpha(#fff)
// => 1

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

dark(color)
检查color是否是暗色。

1
2
3
4
5
6
7
8
dark(black)
// => true

dark(#005716)
// => true

dark(white)
// => false

light(color)
检查color是否是亮色。

1
2
3
4
5
6
7
8
light(black)
// => false

light(white)
// => true

light(#00FF40)
// => true

hue(color)
返回给定color的色调。

1
2
hue(hsla(50deg, 100%, 80%))
// => 50deg

saturation(color)
返回给定color的饱和度。

1
2
saturation(hsla(50deg, 100%, 80%))
// => 100%

lightness(color)
返回给定color的亮度。

1
2
lightness(hsla(50deg, 100%, 80%))
// => 80%

push(expr, args…)
后面推送给定的args给expr.

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

nums
// => 1 2 3 4 5
别名为append().

pop(expr)
从表达式的尾部抽取第一个值

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

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

shift(expr)
从表达式的前部抽取第一个值

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

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

unshift(expr, args…)
起始位置插入给定的args给expr.

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

nums
// => 1 2 3 4 5
别名为prepend().

index(list, value)
返回列表中值的索引（从零开始）。

1
2
3
4
5
6
7
list = 1 2 3

index(list, 2)
// => 1

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

keys(pairs)
返回给定pairs中的键。

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

values(pairs)
返回给定pairs中的值。

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

list-separator(list)
返回给定列表的分隔符。

1
2
3
4
5
6
7
list1 = a b c
 list-separator(list1)
 // => ' '

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

typeof(node)
字符串形式返回node类型。

1
2
3
4
5
6
7
8
9
10
11
12
type(12)
// => 'unit'

typeof(12)
// => 'unit'

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

type-of(#fff)
// => 'rgba'
别名有type-of和type.

unit(unit[, type])
返回unit类型的字符串或空字符串，或者赋予type值而无需单位转换。

1
2
3
4
5
6
7
8
9
10
11
unit(10)
// => ''

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

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

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

percentage(num)
将数字转换为百分比。

1
2
3
4
5
percentage(.5)
// => 50%

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

match(pattern, string)
检测string是否匹配给定的pattern.

1
2
3
4
5
6
7
8
9
10
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)
绝对值。

1
2
3
4
5
abs(-5px)
// => 5px

abs(5px)
// => 5px

ceil(unit)
向上取整。

1
2
ceil(5.5in)
// => 6in

floor(unit)
向下取整。

1
2
floor(5.6px)
// => 5px

round(unit)
四舍五入取整。

1
2
3
4
5
round(5.5px)
// => 6px

round(5.4px)
// => 5px

sin(angle)
返回给定角度的正弦值。 如果角度以度为单位，如45度，则视为度数，否则视为弧度。

1
2
3
4
5
sin(30deg)
// => 0.5

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

cos(angle)
返回给定角度的余弦值。 如果角度以度为单位，如45度，则视为度数，否则视为弧度。

1
2
cos(180deg)
// => -1

tan(angle)
返回给定角度的切线值。 如果角度以度为单位，如45度，则视为度数，否则视为弧度。

1
2
3
4
5
tan(45deg)
// => 1

tan(90deg)
// => Infinity

min(a, b)
取较小值。

1
2
min(1, 5)
// => 1

max(a, b)
取较大值。

1
2
max(1, 5)
// => 5

even(unit)
是否为偶数。

1
2
even(6px)
// => true

odd(unit)
是否为奇数。

1
2
odd(5mm)
// => true

sum(nums)
求和。

1
2
sum(1 2 3)
// => 6

avg(nums)
求平均数。

1
2
avg(1 2 3)
// => 2

range(start, stop[, step])
按给定步骤返回从开始到结束（包含）的单位列表。 如果step参数省略，则默认为1.该步骤不能为零。

1
2
3
4
5
6
7
8
9
10
11
12
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循环：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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;
}

base-convert(num, base, width)
将num转为相应进制（base）的结果，用零填充宽度（默认宽度为2）

1
2
3
4
5
6
7
8
base-convert(1, 10, 3)
// => 001

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

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

replace(pattern, replacement, val)
返回被replacement替换过pattern部分的val结果，说白了就是替换。

1
2
3
4
5
replace(i, e, 'griin')
// => 'green'

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

join(delim, vals…)
给定vals使用delim连接。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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)
通过将字符串分隔为子串来将字符串/标识分解为字符串数组。

1
2
3
4
5
split(_, bar1_bar2_bar3)
// => bar1 bar2 bar3

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

substr(val, start, length)
返回从指定位置开始的指定字符数的字符串。

1
2
3
4
5
6
7
8
9
substr(ident, 1, 2)
// => de

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

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

slice(val, start[, end])
提取一个字符串/列表的一部分，并返回一个新的字符串/列表。

1
2
3
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

hsla(color | h,s,l,a)
转换给定color为HSLA节点，或h,s,l,a比重值。

1
2
3
4
5
hsla(10deg, 50%, 30%, 0.5)
// => HSLA

hsla(#ffcc00)
// => HSLA

hsl(color | h,s,l)
转换给定color为HSLA节点，或h,s,l比重值。

1
2
3
4
5
hsla(10, 50, 30)
// => HSLA

hsla(#ffcc00)
// => HSLA

rgba(color | r,g,b,a)
从r,g,b,a通道返回RGBA, 或提供color来调整透明度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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节点。

1
2
3
4
5
rgb(255,204,0)
// => #ffcc00

rgb(#fff)
// => #fff

blend(top[, bottom])
使用正常混合将给定的顶部颜色混合在底部颜色上。 底部参数是可选的，默认为#fff。

1
2
3
4
5
6
7
8
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值。该方法单位敏感，例如，支持百分比，如下：

1
2
3
4
5
lighten(#2c2c2c, 30)
// => #787878

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

darken(color, amount)
给定color变暗amount值。该方法单位敏感，例如，支持百分比，如下：

1
2
3
4
5
darken(#D62828, 30)
// => #551010

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

desaturate(color, amount)
给定color饱和度减小amount.

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

saturate(color, amount)
给定color饱和度增加amount.

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

complement(color)
补色。 等于旋转色调180度。

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

invert(color)
颜色反相。红绿蓝颜色反转，透明度不变。

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

spin(color, amount)
以角度旋转给定颜色的色调。

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

grayscale(color)
给出给定颜色的灰度等价颜色。 相当于100％去饱和。

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

mix(color1, color2[, amount])
按给定量混合两种颜色。参数都是可选的，默认为50％。

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

tint(color, amount)
将给定的颜色与白色混合。

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

shade(color, amount)
将给定的颜色与黑色混合。

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

luminosity(color)
返回给定颜色的相对亮度。

1
2
3
4
5
6
7
8
luminosity(white)
// => 1

luminosity(#000)
// => 0

luminosity(red)
// => 0.2126

contrast(top[, bottom])
基于Lea Verou提供的基于“对比度”工具的脚本，返回顶部和底部颜色之间的对比度比率对象。
第二个参数是可选的，默认为#fff。
返回对象中的主键是比例，它的最小值和最大值与底部颜色透明时的比例不同。 在这种情况下，错误也包含一个错误余量。

1
2
3
4
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])
返回给定顶部颜色的透明版本，就好像它是在给定的底部颜色上混合（或者最接近它，如果可能的话）。
第二个参数是可选的，默认为#fff。
第三个参数是可选的，并覆盖自动检测的alpha。

1
2
3
4
5
6
7
8
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)

unquote(str | ident)
给定str引号去除，返回Literal节点。

1
2
3
4
5
6
7
8
unquote("sans-serif")
// => sans-serif

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

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

convert(str)
像unquote()，但尝试将给定的内容转换为Stylus节点。

1
2
3
4
5
6
7
8
9
10
11
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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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)

为表现一致检测这个%字符串操作符。

basename(path[, ext])
返回路径的基本名称，（可选）删除扩展名。

1
2
3
4
5
basename('images/foo.png')
// => "foo.png"

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

dirname(path)
返回路径的文件夹名称

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

extname(path)
返回包含点的路径的文件扩展名。

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

pathjoin(…)
加入执行路径。

1
2
3
4
5
6
7
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'

called-from property
所谓的从属性包含了以相反的顺序调用当前函数的函数列表（第一项是最深的函数）。

1
2
3
4
5
6
7
8
9
10
11
foo()
  bar()

bar()
  baz()

baz()
  return called-from

foo()
// => bar foo

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

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

+cache(keys…)
+cache是一个非常强大的内置函数，允许您创建自己的“高速缓存”混合。
“Cachable mixin”就是在第一次调用时将其内容应用于给定的选择器，但是会在第二次调用时使用相同的参数来扩展第一个调用的选择器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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)
可以使用 +prefix-classes为任何一个类添加前缀

1
2
3
4
5
6
7
8
9
+prefix-classes('foo-')
  .bar
    width: 10px

=>

.foo-bar {
  width: 10px;
}

lookup(name)
允许查找具有给定名称的变量，作为字符串传递。 如果变量未定义，则返回null。
当需要使用动态生成的名称获取变量的值时非常有用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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])
允许创建或覆盖具有给定名称的变量，作为字符串传递到当前范围（如果全局为true，则为全局范围）。
这个bif可以用在你希望插入变量名的情况下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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)
在left和right操作对象上执行给定的op.

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

length([expr])
括号表达式扮演元组，length()方法返回该表达式的长度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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

selector()
返回当前编译的选择器, 适用于&子选择器。

1
2
3
4
5
6
7
8
.foo
  selector()
// => '.foo'

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

selector-exists(selector)
根据提供的选择器是否存在返回ture或false、

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.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

warn(msg)
使用给定的error警告，并不退出。

1
warn("oh noes!")

error(msg)
伴随着给定的错误msg退出。

1
2
3
4
add(a, b)
  unless a is a 'unit' and b is a 'unit'
    error('add() expects units')
  a + b

last(expr)
返回给定expr的最后一个值。

1
2
3
4
5
6
7
8
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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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相反内容。

1
2
3
4
5
6
7
8
opposite-position(right)
// => left

opposite-position(top left)
// => bottom right

opposite-position('top' 'left')
// => bottom right

image-size(path)
返回指定path图片的width和height. 向上查找路径的方法和@import一样，paths设置的时候改变。

1
2
3
4
5
6
7
8
9
10
11
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])
以编码（可用编码：base64（默认值）和utf8）编码的url（）文字返回内联图像。

1
2
3
4
5
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添加到最近的块中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
*json(path[, options])*
将.json文件转换为stylus变量或对象。 嵌套变量对象键用连字符（ - ）连接。

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

use(path)
你可以在’.styl’文件中用use()函数在给定的路径上使用任何给定的js-plugin，就像这样：

1
2
3
4
use("plugins/add.js")

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

而在这种情况下add.js插件看起来是这样的：

1
2
3
4
5
6
7
8
var plugin = function(){
  return function(style){
    style.define('add', function(a, b) {
      return a.operate('+', b);
    });
  };
};
module.exports = plugin;

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

1
2
3
4
5
6
7
8
9
var plugin = function(){
  return function(style){
    var nodes = this.nodes;
    style.define('something', function() {
      return new nodes.Ident('foobar');
    });
  };
};
module.exports = plugin;

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

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

Undefined Functions
未定义的函数将以文字形式输出，例如，我们可以在我们的css中调用rgba-stop(50％,#fff)，并按照您的预期输出。 我们也可以在帮助者中使用它。
在下面的例子中，我们简单地定义函数stop()，它返回文字rgba-stop()调用。

1
2
3
4
5
stop(pos, rgba)
  rgba-stop(pos, rgba)

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