variables - 从 sibling 引用命名空间的 LESS 变量.. 可能吗？

Question

我目前在我的 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() 怎么办？另一个命名空间中的变量？这可能吗？

Answer 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;
    }
}