覆盖嵌套，以留在作用域中

Question

我想知道我是否可以覆盖LESS中的嵌套，以停留在我的作用域内-只是因为它更简单……:-)

如果我有一个具有两种状态的元素，根据我们假设的body-class，我需要定义两个CSS对象。我希望每个模块只有一个。

.module {
    h1 {
        float: left;
    }
}

body.secondary {
    .module {
        h1 {
            float: right;
        }
    }
}

就像你用&定义父级一样，有没有办法覆盖那个父级？？因此，它可能看起来像这样：

.module {
    h1 {
        float: left;
    }

    &=body.secondary {
        h1 {
            float: right;
        }
    }
}

其中&被定义为另一个选择器...

这可能会很棒，并使我的CSS更加简单，因为每个模块只有一个CSS对象。

谢谢..。:-)

Answer 1

我已经在this answer和this answer中对此做了大量的评论。在您的特定情况下，应该是这样的：

更少的

.module {
    h1 {
        float: left;
       body.secondary & {
          float: right;
       }  
    }
}

CSS输出

.module h1 {
  float: left;
}
body.secondary .module h1 {
  float: right;
}

关键是要认识到，&不仅仅是针对html结构中的“父”本身，而是它所在的整个嵌套结构的字符串替换。因此，在上面的解决方案中，嵌套较少的“父”是.module h1，它是在嵌套在其中的body.secondary &构造中的&点处替换的字符串。