2014-10-02 30 views
1

我目前使用我的LESS文件中的以下策略:本從兄弟引用名稱空間LESS變量..可能嗎?

//variables 
#namespace() { 
    #child1() { 
    @variable1: .. 
    @variable2: .. 
    } 

    #child2() { 
    @variableA: .. 
    @variableB: .. 
    @variableC: .. 
    } 
} 

//style 
.namespace { 
    #namespace(); 

    .child1 { 
    #child1(); 
    width: @variable1; 
    } 

    .child2 { 
    #child2(); 
    width: @variableA; 
    height: @variableC; 
    } 
} 

不知道是否是最好的辦法。

它的工作原理,但我現在需要在#child1參考@variableC

是這樣的可能嗎?

#namespace() { 
    #child1() { 
    @variable1: .. 
    @variable2: .. 
    @variable3: #child2() > @variableC; 
    } 

    #child2() { 
    @variableA: .. 
    @variableB: .. 
    @variableC: .. 
    } 
} 

如果我需要在另一個命名空間中導入child2()變量呢?這可能嗎?

回答

1

目前無法使用oneliner語句訪問名稱空間變量。然而,你可以這樣做只是你在「樣式」使用塊以同樣的方式,只是擴大#child2#child1

// variables 

#namespace() { 
    #child1() { 
     @variable1: 1; 
     @variable2: 2; 
     #child2(); 
     @variable3: @variableC; 
    } 

    #child2() { 
     @variableA: A; 
     @variableB: B; 
     @variableC: C; 
    } 
} 

// styles 

.namespace { 
    #namespace(); 

    .child1 { 
     #child1(); 
     width: @variable1; 
     height: @variable3; 
    } 

    .child2 { 
     #child2(); 
     width: @variableA; 
     height: @variableC; 
    } 
} 

這顯然使得#child1是一個#child1/#child2組合這樣的事情得到,如果更靠譜您需要引用的變量在#child1本身中已有一個名稱。在這種情況下,您需要將參考變量放入另一個示波器中,如下所示:

// variables 

#namespace() { 
    #child1() { 
     @apple: 1; 
     .-; .-() { 
      #child2(); 
      @banana: @apple; 
     } 
    } 

    #child2() { 
     @apple: 3; 
     @banana: 4; 
    } 
} 

// styles 

.namespace { 
    #namespace(); 

    .child1 { 
     #child1(); 
     width: @apple; 
     height: @banana; 
    } 

    .child2 { 
     #child2(); 
     width: @apple; 
     height: @banana; 
    } 
}