Dynamic body class with less

Question

Is there a way to dynamically pick between the two colors below based on a class on the body without adding the body class to every less snippet that contains the color using less?

@basketballColor: #ff9900;
@footballColor: #99743d;

Can we do this?

.navbar-inner {
    background-color: @mainColor;
 }

I know we can do this but would like to condense it

body.basketball {

            .navbar-inner {
                background-color: @basketballColor;
            }
        }

body.football {

            .navbar-inner {
                background-color: @footballColor;
            }
        }

Answer 1

This is quite often asked here at SO:

• LESS condition based on CSS class to set a LESS variable
• https://stackoverflow.com/a/25877100
• https://stackoverflow.com/a/23553422

Just condense it via mixins, it is as simple as:

// usage:

body {
    .navbar(basketball, #ff9900);
    .navbar(football,   #99743d);
}

// impl:

.navbar(@name, @color) {
    &.@{name} .navbar-inner {
        background-color: @color;
    }
}

Or alternatively:

// usage:

.navbar(basketball, #ff9900);
.navbar(football,   #99743d);

// impl:

.navbar(@name, @color) {
    body.@{name} .navbar-inner {
        background-color: @color;
    }
}