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

Question

一段时间以来，我一直在减少使用，主要是为了让我的日常琐事变得更轻松一些。我今天为了好玩而少玩，并尝试做一些我以前没有做过的事情。我发现与我类似的问题只是不够准确，我无法得出总体结论。

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

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

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

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

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

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

Answer 1

您的问题与 the variable's scope 有关.您的两个变量在 .divOne 和 .divTwo 的包含 block 中定义，这使得它们在这些代码块的本地范围内。要解决这个问题，您需要使它们更具全局范围(即在要使用它们的包含 block 之外定义，但不在另一个包含 block 内定义)，或者将它们在本地范围内定义为 .containgDiv block .

许多选项(可能还有更多)

请注意，在以下选项中，#3 是唯一与您的问题标题“将变量从一个 mixin 传递到另一个”直接匹配的选项。但是，提供获取变量的其他方法是为了展示可以做的事情的灵 active ，以及​​让人们意识到要做出的关于什么对可访问性很重要的决定。

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