从兄弟姐妹中引用命名空间的LESS变量..可能吗?

时间:2014-10-02 13:47:13

标签: variables namespaces less

我目前在LESS文件中使用以下策略:

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

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

//style
.namespace {
  #namespace();

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

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

不确定这是否是最佳方法。

虽然有效但我现在需要在@variableC中引用#child1

这样的事情可能吗?

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

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

如果我需要在另一个命名空间中导入child2()变量怎么办?这有可能吗?

1 个答案:

答案 0 :(得分: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;
    }
}