css - 如何在 LESS 中使用父选择器更改变量值

Question

让我们有以下片段:

.dashboard.tile {
    display: block;
    color:white;
    &-blue {
        @body-color:@light-blue;
        @footer-color:@dark-blue;
        font-size: 10px;
    }
    @body-color:@greenBright;
    @footer-color:#000;
    div.tile-body {
        border-radius: @tile-border-radius @tile-border-radius 0 0;
        background-color: @body-color;
        font-size: @font-size-h2;
    }
    div.tile-footer {
        border-radius: 0 0 @tile-border-radius @tile-border-radius;
        background-color: @footer-color;
    }
}

我的目标是创建其他类，例如 tile-blue tile-red 等，它们只会更改颜色变量值。不幸的是，这不起作用。 tile-blue 使用 font-size:10 生成，但变量不受影响 - 此外，未应用默认颜色所以我想我搞砸了选择器层次结构等等

Answer 1

找到了完全符合我需求的解决方案

.dashboard-tile{
    &-blue{
        .dashboard-tile(@light-blue,@dark-blue)
    }
    &-green{
        .dashboard-tile(@light-green,@dark-green)
    }
    &-red{
        .dashboard-tile(@light-red,@dark-red)
    }
    &-violet{
        .dashboard-tile(@light-violet,@dark-violet)
    }
}
.dashboard-tile(@body-color,@footer-color) {
    margin-bottom: 5px;
    margin-top: 5px;
    display: block;
    color: white;
    .tile-body {
        border-radius: @tile-border-radius @tile-border-radius 0 0;
        background-color: @body-color;
        font-size:@font-size-h2;
        #tilePadding;
    }
    .tile-footer {
        border-radius: 0 0 @tile-border-radius @tile-border-radius;
        background-color: @footer-color;
        #tilePadding;
    }
}