Css 强制LESS导入文件两次

我正在构建一个无变量驱动的框架，其中子主题可以覆盖父主题中设置的变量。该框架包括响应式设计，因此每个媒体查询的变量都设置了不同的值。为了使媒体查询特定变量生效，创建主布局的相同样式也必须存在于媒体查询中。为了使其尽可能动态，我创建了无布局文件，希望在每次媒体查询时导入这些文件。不幸的是，LESS只导入一次样式，而忽略同一文件的所有后续导入

下面是它看起来的要点：

无样式：

@import "variables"; // has the variables for the main layout
@import "variables-calculations";  // has all the dynamic element size calculations that change with the defined variables
@import "layouts";  // has all of the styles that incorporate the variables
@import "responsive-tablet-wide";

media-query-tablet-wide.less

@media screen and (max-width: 1199px) {
  @import "variables-responsive-tablet-wide";  // has all the variables for the current breakpoint
  @import "variables-calculations";  
  @import "layouts";
}

媒体查询的结果输出？空的：

@media screen and (max-width: 1199px) {

}

我使用更少的编译器预印本

---

如何强制LESS编译“布局”两次？或者5次。

我应该在一个文件中定义变量，并将目标/设备附加到其中以区分它们

因此，变量应该定义：

@var1: 15;
@var1-tablet: 30; 
etc.

主要原因见：

定义变量两次时，变量的最后一个定义是 已使用，从当前范围向上搜索。这类似于css 定义中的最后一个属性用于 确定值

---

以防有

@import（multiple）

语句强制它导入更多内容。但事实上，这并不是这个特定用例实际需要的，请看。实际上，你所建议的正是我需要的。另一个建议只是让事情变得更混乱。好吧，如果没有看到“变量”的内部结构，我不能肯定，但我怀疑，很可能你正试图以迭代的方式使用这些变量（因此，你将面临更多的问题，因为较少的变量无法以这种方式工作）。但是如果不是你的情况-酷-我很高兴我的评论有帮助。少变量的酷之处在于你可以在不同的范围内对它们进行不同的定义。例如：如果我的全局页面宽度为1100px，我可以在媒体查询中将该变量再次设置为950px，它只影响将其合并到该媒体查询中的样式。这就是为什么我想在每个媒体查询中导入相同的样式。我有意使用这种行为来获得好处。每个值不是4个变量，而是一个变量，只在需要的范围内更改它的值。这也有助于让更少的技术人员在框架内工作——不需要记住额外的变量名。我对您的框架了解得不够/什么都不知道，无法告诉您是否正确。我认为理解open

variables responsive tablet wide

可以编辑，或者在中编辑

@vars responsive tablet wide

。。我在上面添加了另一个注释来解释为什么我使用相同的变量名：如果您有一个在任何括号外声明的变量，那么在某些括号内更改该变量的值（如媒体查询），新值仅在括号内使用时应用于该变量。在外部，它将恢复为原始值。