How stylus deals with variables scope?
--
1- Are all variables global?
$foo = red // is $foo global?
2- Similarly to the commonJS module, is there any exports
/require
equivalent?
$foo = @import 'foo'
body { color: $foo }
3- What about variables declared in a CSS block, maybe with mixins:
$foo = green
bar()
$foo = yellow // is it the same $foo ?
$baz = blue. // local or implied global?
ul {
background: $foo // green or yellow? red?
$foo = red
li {
$foo = pink
}
color: $foo // pink?
bar() // what about $foo now?
}
--
Would appreciate any clarification or documentation about this...
Thank you
If you slightly reword part #3 of your question:
$foo = green
p('global: $foo is ' $foo)
bar()
$foo = yellow
p('In bar(): $foo is ' $foo)
$baz = blue
p('$baz outside of bar() is ' $baz)
ul {
background: $foo
p('In ul: $foo is ' $foo)
$foo = red
p('In ul: now $foo is ' $foo)
li {
$foo = pink
p('In ul li: $foo is ' $foo)
}
color: $foo // pink?
p('Back in ul: now $foo is ' $foo)
bar()
p('what about $foo now? ' $foo)
}
Then stylus will answer it:
$ stylus test.styl
inspect: 'global: $foo is ' (#008000)
inspect: '$baz outside of bar() is ' $baz
inspect: 'In ul: $foo is ' (#008000)
inspect: 'In ul: now $foo is ' (#f00)
inspect: 'In ul li: $foo is ' (#ffc0cb)
inspect: 'Back in ul: now $foo is ' (#f00)
inspect: 'In bar(): $foo is ' (#ff0)
inspect: 'what about $foo now? ' (#f00)
compiled test.css
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With