2

我正在构建一个变量驱动的 LESS 框架，其中子主题可以覆盖父主题中设置的变量。该框架包括响应式设计，因此变量为每个媒体查询设置了不同的值。为了使媒体查询特定变量生效，创建主布局的相同样式也必须存在于媒体查询中。为了使其尽可能动态，我创建了布局较少的文件，我想在每次媒体查询时导入这些文件。不幸的是，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 编译器 Prepros。

如何强制 LESS 编译“布局”两次？或者5次，就此而言。

4

1 回答 1

1

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

所以变量应该定义：

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

主要原因，见http://lesscss.org/：

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

于 2013-12-11T18:56:42.897 回答