5

我已经使用 less 有一段时间了，主要用于基本的事情，让我的日常琐事更轻松一些。我今天为了好玩而玩得更少，并尝试做一些我以前没有做的事情。我发现与我的问题类似的问题还不够准确，我无法得出一个全面的结论。

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

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

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

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

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

如果这里有与我直接相关的问题，我很抱歉发布这个；我只是找不到任何太明确的东西。谢谢！

4

1 回答 1

8

您的问题在于变量的范围。.divOne您的两个变量在and的包含块中定义.divTwo，这使得它们在本地范围内限定为这些代码块。要解决这个问题，您需要使它们更具全局范围（即在要使用它们的包含块之外定义，但不在另一个包含块内），或者将它们本地限定到.containgDiv块中。

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

请注意，在以下选项中，#3 是唯一与您的问题标题“将变量从一个 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) 使用嵌套的本地访问 Mixin 来设置变量

这允许您在一个代码块的本地范围内设置和使用它（并且它对所有其他代码块都是隐藏的），但仍然可以在其他范围内访问（通过代码块的命名空间和嵌套 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;
}
于 2013-07-05T23:12:28.987 回答