2012-03-06 5 views
9

Как работает стилус с переменными scope scope?Переменная область в Stylus

-

1- ли все переменные глобальные?

$foo = red // is $foo global? 

2- Аналогично commonJS module, есть ли exports/require эквивалентны?

$foo = @import 'foo' 

body { color: $foo } 

3- насчет переменных, объявленных в CSS блока, может быть, с 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? 

} 

-

Оценил какие-либо разъяснения или документацию по этому поводу ...

Спасибо

+0

Проблема связана с 2/https://github.com/LearnBoost/stylus/issues/526 – abernier

ответ

10

Если y НУ слегка перефразировать часть # 3 Ваш вопрос:

$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 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 
Смежные вопросы