Stylus中的变量作用域

Question

Stylus如何处理变量作用域？

--

1- 所有变量都是全局的吗？

$foo = red // is $foo global?

2- 与commonJS模块类似，是否有任何exports/require等效的内容？

$foo = @import 'foo'

body { color: $foo }

3- CSS块中声明的变量以及混入方式如何处理：

$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?

}

--

希望能获得有关此事的任何澄清或文档......

谢谢

- abernier

---

与2/ https://github.com/LearnBoost/stylus/issues/526 相关的问题。 - abernier

Answer 1

如果您稍微改一下您问题的第三部分：

$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)                                           
}

然后stylus将会回答它：

$ 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

- Bryan