覆盖嵌套，以保持在范围内答案

【问题标题】：Overriding nesting, to stay in scope覆盖嵌套，以保持在范围内
【发布时间】：2013-02-06 17:39:34
【问题描述】：

我想知道是否可以覆盖 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 对象。

谢谢... :-)

【问题讨论】：

标签： css less

【解决方案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结构中的“父”本身，而是它所在的整个嵌套结构的字符串替换。所以在我上面的解决方案中，嵌套的 LESS “父级”是 .module h1，它是在嵌套在其中的 body.secondary & 构造中的 & 点处替换的字符串。

【讨论】：