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等只会更改颜色变量值的类。 Unformtunelty这不起作用。使用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;
    }
}

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

1 个答案: