在LESS CSS中将变量从一个mixin传递到另一个mixin

Question

我已经使用了一段时间,主要用于基本的事情,让我的日常工作变得容易一点.我今天为了好玩而少搞乱,试图做一些我之前没有的事情.我发现类似于我的问题并不完全正确,我能够得出一个总体结论.

我总共有3个div,一个包含2个孩子的div.我想将容器的总宽度分配给两个加在一起的子项的大小.我已经尝试了很多不同的东西,看起来它们可以工作,但它们不是由于未定义的变量错误,无论我如何尝试传递它们.我在这里读到,在mixin中定义的变量保持私有,我假设这是我的问题,但我看到其他人做了类似的事情,并使其工作.

无论如何,这是一个我想要完成的实际尝试的视觉例子.

.divOne {
    @widthOne: 20px;
    width: @widthOne;
}

.divTwo {
    @widthTwo: 50px;
    width: @widthTwo;
}

.containgDiv {
    width: @widthOne + @widthTwo;
}

如果这里有一个与我直接相关的问题,我很抱歉发布这个; 我只是找不到太清楚的东西.谢谢!

Answer 1

您的问题在于变量的范围.您的两个变量在.divOneand 的包含块中定义.divTwo,这使得它们在本地作用于这些代码块.要解决这个问题,您需要使它们更全局范围化(即在包含块的外部定义使用它们,但不在另一个包含块内),或者将它们本地放入.containgDiv块中.

许多选项(可能更多)

请注意,在以下选项中,#3是唯一一个直接匹配您的问题标题"将变量从一个mixin传递到另一个mixin"的选项.然而,获取变量的其他方式是为了显示可以做的事情的灵活性,以及​​让人们意识到对可访问性的重要性做出的决定.

1)全球范围

任何代码块都可以访问它.这通常用于LESS.

@widthOne: 20px;
@widthTwo: 50px;

.divOne {
    width: @widthOne;
}

.divTwo {  
    width: @widthTwo;
}

.containgDiv {
    width: @widthOne + @widthTwo;
}

2)命名空间范围(较大代码块中的"全局")

命名空间中的任何代码块都可以直接访问它,间接访问其他代码块(请参阅#3中的内容).注意,这实际上是为共享变量的项目制作一个大型的主混合.它使变量与其余代码保持隐藏.

#someNameSpaceName() {

    @widthOne: 20px;
    @widthTwo: 50px;

    .divOne {
        width: @widthOne;
    }

    .divTwo {  
        width: @widthTwo;
    }

    .containgDiv {
        width: @widthOne + @widthTwo;
    }
}

#someNameSpaceName();

3)使用嵌套的本地访问混合来设置变量

这允许您在一个代码块的本地范围内设置和使用它(并且它对所有其他代码块都是隐藏的),但仍然可以在其他范围内访问(通过代码块的命名空间和嵌套混合的门户) ).

.divOne {
    .setWidth() {
    @widthOne: 20px;
    }
    .setWidth();
    width: @widthOne;
}

.divTwo {
    .setWidth() {
    @widthTwo: 50px;
    }
    .setWidth();
    width: @widthTwo;
}

.containgDiv {
    .divOne > .setWidth();
    .divTwo > .setWidth();
    width: @widthOne + @widthTwo;
}

4)使用全球可访问的Mixin为所有本地设置变量

这允许您在一个位置设置变量,并将这些变量从全局范围隐藏,但在需要时在本地范围内使用它们.

.setWidths() {
  @widthOne: 20px;
  @widthTwo: 50px;
}

.divOne {
  .setWidths();
  width: @widthOne;
}

.divTwo {  
  .setWidths();
  width: @widthTwo;
}

.containgDiv {
  .setWidths();
  width: @widthOne + @widthTwo;
}

输出完全相同

使用上述哪种技术并不重要,它们都会推出以下CSS.

.divOne {
  width: 20px;
}
.divTwo {
  width: 50px;
}
.containgDiv {
  width: 70px;
}