Splitting LESS output into two files - variable and constant - css

Question

I'm using a great number of variables in my LESS implementation, however there are obviously many rules that are hard coded. The variables are defined on compile by a LESS file containing my style definitions.
Is it possible to split all of the CSS rules output by LESS into variable parts and constant parts, without manually creating two separate files?
So:
#myColour: white;
.foo {
background-colour: #myColour;
width: 120px;
}
becomes two files:
.foo {
background-colour: white;
}
and
.foo {
width: 120px;
}
This way if the theme changes, only the variables need to be reloaded.
Any ideas?
Thanks

Answer 1

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