如何在手写笔中创建包装函数?
How to create a wrapper function in stylus?
我想创建一个函数,将另一个内置函数包装在 stylus 中。类似于:
myFunction(color, amount)
darken(color, amount)
我想为一个项目创建多个主题,有些主题是深色的,有些是浅色的,所以对于 hover
我想 lighen()
background-color
并且对于其他darken()
,并在所有主题通用的文件中使用myFunction()
,仅更改每个主题中的功能定义。
我想知道的是:有可能吗?或者如果stylus中有任何其他的函数多态性机制,任何能够动态改变函数定义的方法。
我试过的:
首先我试着像这样简单地包装:
inHover (color, amount)
darken(color, amount)
但是我得到了:
cmd.exe /D /C E:/node/nodist/bin/stylus.cmd definitions.styl
E:\node\nodist\bin\node_modules\stylus\bin\stylus:662
throw err;
^
RangeError: definitions.styl:20:10
16|
17| /* Functions */
18|
19| inHover (color, amount)
20| darken(color, amount)
----------------^
21|
Maximum call stack size exceeded
at darken() (E:/node/nodist/bin/node_modules/stylus/lib/functions/index.styl:128:21)
at "inHover (color" (definitions.styl:18:16)
at Evaluator.visit (E:\node\nodist\bin\node_modules\stylus\lib\visitor\evaluator.js:162:34)
at Evaluator.visitIdent (E:\node\nodist\bin\node_modules\stylus\lib\visitor\evaluator.js:533:23)
at Evaluator.Visitor.visit (E:\node\nodist\bin\node_modules\stylus\lib\visitor\index.js:28:40)
at Evaluator.visit (E:\node\nodist\bin\node_modules\stylus\lib\visitor\evaluator.js:156:18)
at Evaluator.visitExpression (E:\node\nodist\bin\node_modules\stylus\lib\visitor\evaluator.js:630:26)
at Evaluator.Visitor.visit (E:\node\nodist\bin\node_modules\stylus\lib\visitor\index.js:28:40)
at Evaluator.visit (E:\node\nodist\bin\node_modules\stylus\lib\visitor\evaluator.js:156:18)
at Evaluator.visitIdent (E:\node\nodist\bin\node_modules\stylus\lib\visitor\evaluator.js:533:23)
at Evaluator.Visitor.visit (E:\node\nodist\bin\node_modules\stylus\lib\visitor\index.js:28:40)
at Evaluator.visit (E:\node\nodist\bin\node_modules\stylus\lib\visitor\evaluator.js:156:18)
我不能使用块,因为它们不接受参数。
我的代码:
HTML代码:
<html>
<head>
<link href='/css/themes/my_theme/index.css' rel='styleSheet'/>
<body ng-app='app'>
<!-- Body defination -->
</body>
</html>
/css/themes/my_theme/index.styl
文件:
@import 'definitions.styl'
@import '../../site.styl' /* All the common css styles*/
myFunction(color, amount)
darken(color, amount)
/css/themes/my_theme/definitions.styl
文件:
/* Color definitions */
colorPrimary = red
colorBackground = green
/* Functions */
inHover (color, amount)
darken(color, amount)
我用的是:
- 手写笔 0.52.4
- 节点 4.1.1
- 快递4.13.3
好吧,这段代码对我有用(尝试删除函数定义中 (
之前的 space:
inHover(color, amount)
darken(color, amount)
body
color: inHover(#c00, 10)
使用 Stylus 0.52.4 编译为:
body {
color: #900;
}
我想创建一个函数,将另一个内置函数包装在 stylus 中。类似于:
myFunction(color, amount)
darken(color, amount)
我想为一个项目创建多个主题,有些主题是深色的,有些是浅色的,所以对于 hover
我想 lighen()
background-color
并且对于其他darken()
,并在所有主题通用的文件中使用myFunction()
,仅更改每个主题中的功能定义。
我想知道的是:有可能吗?或者如果stylus中有任何其他的函数多态性机制,任何能够动态改变函数定义的方法。
我试过的:
首先我试着像这样简单地包装:
inHover (color, amount) darken(color, amount)
但是我得到了:
cmd.exe /D /C E:/node/nodist/bin/stylus.cmd definitions.styl E:\node\nodist\bin\node_modules\stylus\bin\stylus:662 throw err; ^ RangeError: definitions.styl:20:10 16| 17| /* Functions */ 18| 19| inHover (color, amount) 20| darken(color, amount) ----------------^ 21| Maximum call stack size exceeded at darken() (E:/node/nodist/bin/node_modules/stylus/lib/functions/index.styl:128:21) at "inHover (color" (definitions.styl:18:16) at Evaluator.visit (E:\node\nodist\bin\node_modules\stylus\lib\visitor\evaluator.js:162:34) at Evaluator.visitIdent (E:\node\nodist\bin\node_modules\stylus\lib\visitor\evaluator.js:533:23) at Evaluator.Visitor.visit (E:\node\nodist\bin\node_modules\stylus\lib\visitor\index.js:28:40) at Evaluator.visit (E:\node\nodist\bin\node_modules\stylus\lib\visitor\evaluator.js:156:18) at Evaluator.visitExpression (E:\node\nodist\bin\node_modules\stylus\lib\visitor\evaluator.js:630:26) at Evaluator.Visitor.visit (E:\node\nodist\bin\node_modules\stylus\lib\visitor\index.js:28:40) at Evaluator.visit (E:\node\nodist\bin\node_modules\stylus\lib\visitor\evaluator.js:156:18) at Evaluator.visitIdent (E:\node\nodist\bin\node_modules\stylus\lib\visitor\evaluator.js:533:23) at Evaluator.Visitor.visit (E:\node\nodist\bin\node_modules\stylus\lib\visitor\index.js:28:40) at Evaluator.visit (E:\node\nodist\bin\node_modules\stylus\lib\visitor\evaluator.js:156:18)
我不能使用块,因为它们不接受参数。
我的代码:
HTML代码:
<html>
<head>
<link href='/css/themes/my_theme/index.css' rel='styleSheet'/>
<body ng-app='app'>
<!-- Body defination -->
</body>
</html>
/css/themes/my_theme/index.styl
文件:
@import 'definitions.styl'
@import '../../site.styl' /* All the common css styles*/
myFunction(color, amount)
darken(color, amount)
/css/themes/my_theme/definitions.styl
文件:
/* Color definitions */
colorPrimary = red
colorBackground = green
/* Functions */
inHover (color, amount)
darken(color, amount)
我用的是:
- 手写笔 0.52.4
- 节点 4.1.1
- 快递4.13.3
好吧,这段代码对我有用(尝试删除函数定义中 (
之前的 space:
inHover(color, amount)
darken(color, amount)
body
color: inHover(#c00, 10)
使用 Stylus 0.52.4 编译为:
body {
color: #900;
}