3

我一直在使用我认为非常优雅的模式来定义可重用组件/小部件的样式，使用 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 更改日志，1.4.0 Beta 1 有一行“mixin 中的变量不再‘泄漏’到它们的调用范围内”

有没有办法解决？

4

1 回答 1

1

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

您上面的示例导致错误：

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() {}
}

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

我可以想象由于新的范围规则，您的库可能会如何损坏，但是您上面给出的这个特定示例并不能说明问题。

于 2013-09-13T20:29:27.297 回答