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

Question

我已经用了一段时间了，主要是为了做一些基本的事情，让我的日常琐事变得更容易。我今天玩得少了，试着做一些以前没有做过的事情。我发现与我的问题类似的问题不够准确，我无法得出总体结论。

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

无论如何，这里是一个视觉上的例子，我正在努力实现什么，而不是一个实际的尝试。

.divOne {
    @widthOne: 20px;
    width: @widthOne;
}
.divTwo {
    @widthTwo: 50px;
    width: @widthTwo;
}
.containgDiv {
    width: @widthOne + @widthTwo;
}

如果这里有一个问题与我的直接相关，我很抱歉发布此消息；我就是找不到太清晰的东西。谢谢

Answer 1

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

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

请注意，在以下选项中，#3是唯一一个与您的问题标题"将变量从一个mixin传递到另一个mizin"直接匹配的选项。然而，提供了获取变量的其他方法，以显示可以做什么的灵活性，并使人们意识到要做出的关于什么对可访问性很重要的决定。

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