css - 如何在 LESS CSS 1.4+ 中覆盖 mixins

Question

我一直在使用我认为非常优雅的模式来定义可重用组件/小部件的样式，使用 LESS。它在 LESS 1.3- 中运行良好，但最近升级后，我的整个图书馆都坏了。有谁知道在 1.4+ 中完成这样的事情的方法吗？

这是一个非常简单的组件示例:

#componentName {
  .loadMixins(){
    .text() {}
    .header() {}
  }

  .apply(){
    > h3 {
      // markup-specific styles
      padding: 3px;
      margin-bottom: 0;

      // custom styles
      .header();
    }

    > div.body, > div.popup p {
      color: red;

      // custom styles
      .text()
    }
  }
}

下面是它的使用方式:

.coolWidget {
  #componentName.loadMixins();

  // override mixins here
  .text(){
    color: green;
  }

  #componentName.apply();
}

这使所有与标记相关的样式从用户那里抽象出来。我可以完全改变我的标记，而用户的样式仍然有效。根据less.js changelog , 1.4.0 Beta 1 有一行“mixins 中的变量不再‘泄漏’到它们的调用范围”

有什么办法解决这个问题吗？

Answer 1

严格来说，嵌套变量和混合仍然扩展到调用范围，除非该范围已经定义了这些名称。

您上面的示例导致错误:

SyntaxError: .header is undefined...

并且预计在 .coolWidget(或其他任何地方)中实际上没有定义 .header()。 这可以通过在#componentName 内某处为 .text 和 .header 提供“默认”定义来解决。 例如，如果您将 .loadMixins() 修改为:

.loadMixins() {
    .text();
    .header();

    // default properties in case a caller does not provide its own:
    .text()   {}
    .header() {}
}

然后示例编译正常，所有文本/标题属性都按预期覆盖。

---

我可以想象您的库可能会因为新的范围规则而被破坏，但是您在上面给出的这个特定示例并没有说明问题。