Less conditional style inclusion - css

Question

I'm kinda new to LESS, so I'm not sure if that's possible and how.
So my idea is this :
I have a main-stylesheet.less and a dozen smaller stylesheets each of which contains several versions of styling for a particular element i.e. header.less, footer.less, main-nav.less etc.
So in header.less every variant of styling is linked to a condition and when you include this LESS file in the main-stylesheet.less via this condition, just that particular chunk of code is compiled and not the other ones that are linked to other conditions.
I hope I've been thorough enough for you to best understand me.
Is this possible and how ?

Answer 1

Keeping it Generic
By using conditional mixins, the code in main-stylesheet.less stays generic, with only the variables changing to control what is actually compiled.
Example header.less
.header() when (#header = 1) {
#header {
your: properties;
for: header1;
}
}
.header() when (#header = 2) {
#header {
your: properties;
for: header2;
}
}
This could continue on, and similar code would be in the other footer.less files, etc.
Example main-sytlesheet.less
#import header.less;
#import main-nav.less;
#import footer.less;
/* set your variables for your conditional mixins */
#header: 1;
#main-nav: 3;
#footer: 3;
/* call the mixins */
.header();
.main-nav();
.footer();
The global variables you set will only choose the .header() mixin to generate the #header, etc. that #header variable is set to.

Answer 2

I think maybe your looking for a LESS mixin?
/* header.less */
.header1 () {
// including selector
.header {
position: relative;
z-index: 1001;
width: 100%;
margin: 0 0 20px;
overflow: hidden;
}
}
.header2 () {
position: relative;
z-index: 1001;
width: 50%;
margin: 20px;
}
.header3 () {
position: relative;
z-index: 1;
width: 90%;
margin: 0 0 50px;
overflow: hidden;
}
And include it like this:
/* main-stylesheet.less */
#import 'header.less';
body {
.header1();
}
You could also get smart and use one mixin:
.header (#margin: 0, #width: 100%) {
position: relative;
z-index: 1001;
width: #width;
margin: #margin;
overflow: hidden;
}
header {
.header(0 0 20px, 50%);
}