Force LESS to import a file twice

Question

I am building a variable-driven LESS framework in which a child theme can override variables set in the parent theme. This framework includes responsive design, so variables have different values set for every media query. In order for the media query specific variables to take effect, the same styles that create the main layout have to also exist within the media queries. To make this as dynamic as possible, I have created layout less files that I want to import at every media query. Unfortunately, LESS only imports styles once and ignores all subsequent imports of the same file.

Here's the gist what it looks like:

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

The resulting output for the media query? Empty:

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

}

I am using LESS compiler Prepros.

How can I force LESS to compile "layouts" twice? Or 5 times, for that matter.

Answer 1

I should define your variables in one file and append the target / device to it to discriminate between them

so variables should define:

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

Main reason, see http://lesscss.org/:

When defining a variable twice, the last definition of the variable is used, searching from the current scope upwards. This is similar to css itself where the last property inside a definition is used to determine the value.