在 Stylus mixin 中连接变量

Question

我正在尝试制作一个 mixin 来生成一些带有变量的样式，我想连接两个变量，但我无法让它工作。这是一个例子：

centerSprite($icon)
    margin-top -(($ico_+$icon+_height) / 2)
    margin-left -(($ico_+$icon+_width) / 2)

我有一个带有图标高度和宽度的变量，我想将名称放入 mixin 的参数中以获取该变量并进行操作...

提前致谢！

Answer 1

我不知道为什么（也许是一个错误？）但是当你在函数内的属性值的括号前有一个减号时，stylus 无法编译：

此代码无法编译：

centerSprite()
    margin-top -((5 + 10 + 3) / 2)

body
    centerSprite()

但是这个没有编译功能：

 body
     margin-top -((5 + 10 + 3) / 2)

而且我发现如果在属性之后使用冒号也可以在函数中使用：

手写笔

centerSprite()
    margin-top: -((5 + 10 + 3) / 2)

body
    centerSprite()

CSS

body {
    margin-top: -9;
}

Answer 2

一个好人 on Github explained to me the lookup Stylus 中的内置功能，这就是我要找的：

$ico_test_width  ?= 20px
$ico_test_height ?= 15px

centerSprite($icon)
    margin-top : -(lookup('$ico_' + $icon + '_height') / 2)
    margin-left: -(lookup('$ico_' + $icon + '_width')  / 2)

body  
    centerSprite('test')

在 Stylus mixin 中连接变量

Concatenating variables in a Stylus mixin

css

stylus