css - 覆盖嵌套，以保持在范围内

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 对象方面更加简单。

谢谢... ：-）

score 1 · Accepted 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 &

1 回答 1