实用方法
called-from property
' called-from '属性包含以倒序调用当前函数的函数列表(第一项是最深的函数)。
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是一个非常强大的内置函数，它允许你创建自己的“可缓存”mixins。
一个“可缓存的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附带了一个block mixin前缀-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 '为真，则为全局作用域)。
这个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)
对' left '和' right '执行' op '操作:
op = '+'
operate(op, 15, 5)
// => 20
selector()
返回编译后的当前选择器或&如果在根级别调用。
.foo
selector()
// => '.foo'
.foo
&:hover
selector()
// '.foo:hover'
elector-exists(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)
返回与给定的' position '相反的值。
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)
将属性' name '与给定的' expr '添加到最近的块。
例如:
omething()
add-property('bar', 1 2 3)
s('bar')
body
foo: something()
相当于
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
使用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;
}
如果你在上面的例子中注意到，' 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;
}
我们的实现现在对于内部调用的属性和调用的位置都是完全透明的。
这个强大的概念有助于厂商对函数调用的透明支持，比如渐变。
网友评论