Compile Less to Multiple CSS Files, Based on Variable Value

compiling multiple less files into one fails to recognize variables from variables.less

You are on the right track:

In grid.less and in button.less you should include

@import 'variables.less';
@import 'mixins.less';

You want to make sure that any less file that you have should be able to compiled by itself (modular). It should already contain/import all the dependencies required.

In main.less should have the following:

@import 'grid.less';
@import 'button.less';

From the error it appears that you are missing a variable border-color. You should specify this in variables.less

Splitting LESS output into two files - variable and constant

Short Answer: No

"Without manually creating two separate files?" (emphasis added), the answer is "No."

You, the programmer, would have to code up two separate files , one that contains the variable calls, then one that contains the "hard coded" info (although, see UPDATE below). But I would not recommend that, as it would be hard to maintain (as far as seeing what is going on with the two different .foo entries in two different files). That's probably why you were hoping to split them after you coded (automatically), but this is just not possible to instruct LESS to output the variable property values to one file and the hard coded to another, at least, not automatically...

UPDATE: The Closest I Could Get

If I understand what you want, you want one file to code in, having the various selectors defined once, but having the properties able to split into a file of css that is variable controlled and therefore that file updated regularly, and one that is static (or "hard coded") that is rarely updated. Here is the closest I could come to coding for that. It is certainly not automatic, but does offer some "consistency" in how it functions.

Consider...

LESS Variables and Master files

// assume this is your variables file (variables.less)
@myColour: white;

// assume this is a master coding file, but it keeps all the properties
// "hidden" in nested mixins labled props()
// This file imports your variables.less file
// Note that the @file variable is NOT in the variables.less file, but
// is in the particular files used to split the code.
// We will call this file master.less

@import variables.less;

.foo {
  .props() when (@file = var), (@file = all) {
    background-colour: @myColour;
  }
  .props() when (@file = static), (@file = all) {
    width: 120px;
  }
  & > p.nested {
    .props() when (@file = var), (@file = all) {
       background-colour: @myColour;
    }
    .props() when (@file = static), (@file = all) {
       margin: 1em;
    }
    .props(); // call the props, each nesting needs its own props() call.
  }
  .props(); // call the props
}

Generate LESS Static File

// Assume this is your desired static only file, called staticCSS.less
// It has imported the master coding file to access mixins
// and all code is produced by setting the local @file variable in it

@import master.less;
@file: static; // only static css will output

CSS Static File Output

.foo {
  width: 120px;
}
.foo > p.nested {
  margin: 1em;
}

Generate LESS Variable Controlled File

// Assume this is your desired variable controlled file, called variableCSS.less
// It has imported the master coding file to access mixins
// and all code is produced by setting the local @file variable in it

@import master.less;
@file: var; // only variable css will output

CSS Variable Controlled File Output

.foo {
  background-colour: #ffffff;
}
.foo > p.nested {
  background-colour: #ffffff;
}

Generate All Properties

For testing purposes, or just to better see the total combined output of the files, I set the above mixins to all be called if @file: all was set, so you could do this in either of the files while testing:

@import master.less;
@file: all; //all css will output

CSS Variable Controlled File Output

.foo {
  background-colour: #ffffff;
  width: 120px;
}
.foo > p.nested {
  background-colour: #ffffff;
  margin: 1em;
}

The class is still fully usable as a mixin itself, or extendable (LESS 1.4)

Adding the following works (making it for @file: static here):

.test {.foo }
.test2 {&:extend(.foo all);}

CSS Output

.foo,
.test2 {
  width: 120px;
}
.foo > p.nested,
.test2 > p.nested {
  margin: 1em;
}
.test {
  width: 120px;
}
.test > p.nested {
  margin: 1em;
}

Is it possible to reuse variables across LESS files?

Much like CSS Less cascades it's values, so the last var declaration wins.

You only import one of the files.

Change the second var's name.

Or make one of your less files more concise and use the var where needed.

less.css sharing variables across files

The best way to do this is to @import your LESS file with all your variables in it. Here's the syntax for the @import keyword:

// For LESS file includes,
@import "lib.less";
// or
@import "lib"; // infers the .less extension

// and for plain CSS includes which are added but not parsed by LESS
@import "style.css";

This works especially well if you serve CSS files to your users (as opposed to the in-browser less.js parsing) because the @import statement will compound your LESS and CSS files into one single CSS file. Maybe you can consider having one controller LESS file that includes your variables, then your other LESS and CSS files so that the end result is one single file you serve to the browser.

I imagine it would be something simple like this:

// Controller.less
@import "english.less";
@import "chart.less";