html - 动态车身类少

Question

有没有一种方法可以根据 body 上的类在下面的两种颜色之间动态选择，而无需将 body 类添加到每个包含使用 less 的颜色的 less 片段？

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