Stylue内置方法 red(color) 返回color中的红色比重
green(color) 返回color中的绿色比重。
blue(color) 返回color中的蓝色比重。
alpha(color) 返回color中的透明度比重
1 2 3 4 5 alpha( // => 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( // => true dark(white) // => false
light(color) 检查color是否是亮色。
1 2 3 4 5 6 7 8 light(black) // => false light(white) // => true light( // => 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( // => 'rgba' type -of(// => '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) 向上取整。
floor(unit) 向下取整。
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度,则视为度数,否则视为弧度。
tan(angle) 返回给定角度的切线值。 如果角度以度为单位,如45度,则视为度数,否则视为弧度。
1 2 3 4 5 tan(45deg) // => 1 tan(90deg) // => Infinity
min(a, b) 取较小值。
max(a, b) 取较大值。
even(unit) 是否为偶数。
odd(unit) 是否为奇数。
sum(nums) 求和。
avg(nums) 求平均数。
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) // =>
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) // =>
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) // => slice(1px solid black, 1) // => solid
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( // => HSLA
hsl(color | h,s,l) 转换给定color为HSLA节点,或h,s,l比重值。
1 2 3 4 5 hsla(10, 50, 30) // => HSLA hsla( // => 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) // => rgba( // rgba(255,204,0,0.5) 另外,stylus支持 // => rgba(255,204,0,0.5) // => 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) // => rgb( // =>
blend(top[, bottom]) 使用正常混合将给定的顶部颜色混合在底部颜色上。 底部参数是可选的,默认为#fff。
1 2 3 4 5 6 7 8 blend(rgba( // => blend(rgba( // => 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( // => lighten( // =>
darken(color, amount) 给定color变暗amount值。该方法单位敏感,例如,支持百分比,如下:
1 2 3 4 5 darken( // => darken( // =>
desaturate(color, amount) 给定color饱和度减小amount.
saturate(color, amount) 给定color饱和度增加amount.
complement(color) 补色。 等于旋转色调180度。
invert(color) 颜色反相。红绿蓝颜色反转,透明度不变。
spin(color, amount) 以角度旋转给定颜色的色调。
grayscale(color) 给出给定颜色的灰度等价颜色。 相当于100%去饱和。
mix(color1, color2[, amount]) 按给定量混合两种颜色。参数都是可选的,默认为50%。
tint(color, amount) 将给定的颜色与白色混合。
shade(color, amount) 将给定的颜色与黑色混合。
luminosity(color) 返回给定颜色的相对亮度。
1 2 3 4 5 6 7 8 luminosity(white) // => 1 luminosity( // => 0 luminosity(red) // => 0.2126
contrast(top[, bottom]) 基于Lea Verou提供的基于“对比度”工具的脚本,返回顶部和底部颜色之间的对比度比率对象。 第二个参数是可选的,默认为#fff。 返回对象中的主键是比例,它的最小值和最大值与底部颜色透明时的比例不同。 在这种情况下,错误也包含一个错误余量。
1 2 3 4 contrast( => 21 contrast( => { "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( => rgba(0,0,0,0.5) transparentify( => rgba(255,255,255,0.25) transparentify( => 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: for prop, val in border define(prefix + '-' + prop, val) body border: border-length border-style border-color => body { border: 1px solid }
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警告,并不退出。
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( 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: 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%,