我已经使用了一段时间,主要用于基本的事情,让我的日常工作变得容易一点.我今天为了好玩而少搞乱,试图做一些我之前没有的事情.我发现类似于我的问题并不完全正确,我能够得出一个总体结论. 我总共有3个
... . . 我已经使用了一段时间,主要用于基本的事情,让我的日常工作变得容易一点.我今天为了好玩而少搞乱,试图做一些我之前没有的事情.我发现类似于我的问题并不完全正确,我能够得出一个总体结论.
我总共有3个div,一个包含2个孩子的div.我想将容器的总宽度分配给两个加在一起的子项的大小.我已经尝试了很多不同的东西,看起来它们可以工作,但它们不是由于未定义的变量错误,无论我如何尝试传递它们.我在这里读到,在mixin中定义的变量保持私有,我假设这是我的问题,但我看到其他人做了类似的事情,并使其工作.
无论如何,这是一个我想要完成的实际尝试的视觉例子.
.divOne { @widthOne: 20px; width: @widthOne;}.divTwo { @widthTwo: 50px; width: @widthTwo;}.containgDiv { width: @widthOne + @widthTwo;} 如果这里有一个与我直接相关的问题,我很抱歉发布这个;我只是找不到太清楚的东西.谢谢！
.解决方法
. 您的问题是 the variable’s scope.您的两个变量是在.divOne和.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;}. . .. ...
