Question

我正在构建一个变量驱动的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";

媒体查询片剂-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次，就此而言。

Answer 1

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

所以变量应该定义：

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

主要原因，请参阅http://lesscss.org/：

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

强制LESS导入文件两次

1 个答案: