Question

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

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

无论如何，这是一个我想要完成的实际尝试的视觉示例。

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

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

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

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

Answer 1

您的问题是the variable's scope。您的两个变量是在.divOne和.divTwo的包含块中定义的，这使得它们在本地作用于这些代码块。要解决这个问题，您需要使它们更具全局作用域（即在包含块之外定义使用它们，但不在另一个包含块中定义），或将它们本地放入.containgDiv块中。

许多选项（可能还有更多）

请注意，在以下选项中，＃3是唯一一个直接匹配您的问题标题“将变量从一个混合传递到另一个混合”的选项。然而，获取变量的其他方式是为了表明可以做什么的灵活性，以及让人们意识到对可访问性的重要性做出的决定。

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）使用嵌套的本地访问混合设置变量

这允许您在一个代码块的本地范围内设置和使用它（并且它对所有其他代码块都是隐藏的），但仍然可以在其他范围内访问（通过代码块的命名空间和门道嵌套的mixin）。

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

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

1 个答案:

许多选项（可能还有更多）

输出完全相同