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

i'm using great number of variables in less implementation, there many rules hard coded. variables defined on compile less file containing style definitions.

is possible split of css rules output less variable parts , constant parts, without manually creating 2 separate files?

so:

@mycolour: white; .foo {    background-colour: @mycolour;    width: 120px; } 

becomes 2 files:

.foo {    background-colour: white; } 

and

.foo {    width: 120px; } 

this way if theme changes, variables need reloaded.

any ideas?

thanks

short answer: no

"without manually creating 2 separate files?" (emphasis added), answer "no."

you, programmer, have code 2 separate files , 1 contains variable calls, 1 contains "hard coded" info (although, see update below). not recommend that, hard maintain (as far seeing going on 2 different .foo entries in 2 different files). that's why hoping split them after coded (automatically), not possible instruct less output variable property values 1 file , hard coded another, @ least, not automatically...

update: closest get

if understand want, want 1 file code in, having various selectors defined once, having properties able split file of css variable controlled , therefore file updated regularly, , 1 static (or "hard coded") updated. here closest come coding that. not automatic, offer "consistency" in how functions.

consider...

less variables , master files

// assume variables file (variables.less) @mycolour: white;  // assume master coding file, keeps properties // "hidden" in nested mixins labled props() // file imports variables.less file // note @file variable not in variables.less file, // in particular files used split code. // call 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 props, each nesting needs own props() call.   }   .props(); // call props } 

generate less static file

// assume desired static file, called staticcss.less // has imported master coding file access mixins // , code produced setting local @file variable in  @import master.less; @file: static; // static css output 

css static file output

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

generate less variable controlled file

// assume desired variable controlled file, called variablecss.less // has imported master coding file access mixins // , code produced setting local @file variable in  @import master.less; @file: var; // variable css output 

css variable controlled file output

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

generate properties

for testing purposes, or better see total combined output of files, set above mixins called if @file: all set, in either of files while testing:

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

css variable controlled file output

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

the class still usable mixin itself, or extendable (less 1.4)

adding following works (making @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; }