覆盖嵌套，保持范围

Question

我想知道我是否可以覆盖LESS中的嵌套，留在我的范围内 - 只是因为它更简单......： - ）

如果我有一个有两种状态的元素，取决于让我们说一个body - 类，我需要定义两个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对此进行了一些广泛的评论。在您的特定情况下，它将是：

<强> LESS

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

CSS输出

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

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