【发布时间】：2013-12-11 18:11:51
【问题描述】：
我正在构建一个变量驱动的 LESS 框架，其中子主题可以覆盖父主题中设置的变量。该框架包括响应式设计，因此变量为每个媒体查询设置了不同的值。为了使媒体查询特定变量生效，创建主布局的相同样式也必须存在于媒体查询中。为了使其尽可能动态，我创建了布局较少的文件，我想在每次媒体查询时导入这些文件。不幸的是，LESS 只导入样式一次，并忽略同一文件的所有后续导入。
这是它的主要内容：
style.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 编译器 Prepros。
如何强制 LESS 编译“布局”两次？或者 5 次，就此而言。
【问题讨论】：
-
以防万一有
@import (multiple)声明强制它导入更多。但实际上，对于这个特定用例，这并不是您真正需要的，请参阅@Bass Jobsen's answer。 -
其实，你的建议正是我所需要的。另一个建议只是让事情变得更加混乱。
-
好吧，如果没有看到“变量”内部，我不能肯定地说，但我怀疑您很可能正在尝试以迭代方式使用这些变量（因此您将面临更多问题因为 LESS 变量不能那样工作）。但如果不是你的情况 - 很酷 - 我很高兴我的评论有所帮助。
-
LESS 变量最酷的地方在于，您可以在不同的范围内以不同的方式定义它们。例如：如果我有一个 1100 像素的全局页面宽度，我可以在媒体查询中再次将变量设置为 950 像素，它只会影响将它合并到该媒体查询中的样式。这就是为什么我想在每个媒体查询中导入相同的样式。