Lea*_*yes 3 global-variables stylus
Stylus 的一大优点是它允许您定义可用于自定义结果输出配置的变量。
例如,
// my-html-object.styl
$my-html-object-color = red
$my-html-object
color $my-html-object-color
Run Code Online (Sandbox Code Playgroud)
但是如何定义这个变量,以便它可以在加载 'my-html-object.styl' 之前被覆盖,以便以下是可能的?
// main.styl
$my-html-object-color = blue
@import('my-html-object')
Run Code Online (Sandbox Code Playgroud)
Stylus 提供了两个相同的运算符来实现这一点?=,:=如此处所述:
http://learnboost.github.io/stylus/docs/operators.html#conditional-assignment--
为了完整起见,这里是一个示例,显示了两种替代(但等效)语法:
示例 1:
// my-html-object.styl
$my-html-object-color ?= blue
$my-html-object
color $my-html-object-color
Run Code Online (Sandbox Code Playgroud)
示例 2:
// my-html-object.styl
$my-html-object-color := blue
$my-html-object
color $my-html-object-color
Run Code Online (Sandbox Code Playgroud)
然后在这两种情况下,您都可以按预期调整值:
// main.styl
$my-html-object-color = blue
@import('my-html-object')
Run Code Online (Sandbox Code Playgroud)