手寫筆 - 使用屬性查找擴展選擇器的引用屬性

Question

我想找到一種方法來引用來自擴展選擇器的屬性。不幸的是，property lookup似乎並沒有對這項工作：

.foo 
    font-size 12px 
.bar 
    @extends .foo 
    line-height @font-size * 2 

/* Output */ 
.foo, 
.bar { 
    font-size: 12px; 
} 
.bar { 
    line-height: ; 
} 

這似乎應該是可能的。這裏有一個簡單的例子，而不@extends：

.foo 
    font-size 12px 
    line-height @font-size * 2 

/* Output */ 
.foo { 
    font-size: 12px; 
    line-height: 24px; 
} 

隨意嘗試了這一點自己：https://learnboost.github.io/stylus/try.html

Answer 1

你忽略範圍！請參見下面的註釋代碼：

.foo 
    font-size 12px 
.bar 
    font-size 12px //<< as long as there is no font-size in .bar scope, you cant reference to it. For that cases use variables. 
    @extends .foo 
    line-height @font-size * 2 

/* Output */ 
.foo, 
.bar { 
    font-size: 12px; 
} 
.bar { 
    line-height: 24px; 
} 

與變量

f-size = 12px 
.foo 
    font-size f-size 
.bar 
    font-size f-size 
    @extends .foo 
    line-height @font-size * 2 
    //or 
    line-height @f-size * 2 
    //or 
    line-height f-size * 2 


/* Output */ 
    .foo, 
    .bar { 
     font-size: 12px; 
    } 
    .bar { 
     line-height: 24px; 

    }