动态身体类少

Question

有没有办法根据身体上的类动态选择下面两种颜色，而不是将身体类添加到包含颜色较少的每个较少的片段？

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

我们可以这样做吗？

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

我知道我们可以做到这一点，但希望将其浓缩

body.basketball {

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

body.football {

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

Answer 1

这在SO：经常被问到：

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

只需通过mixins缩小它，就像：

一样简单

// usage:

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

// impl:

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

或者：

// usage:

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

// impl:

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