如何在CSS 1.4+；

我一直在使用我认为非常优雅的模式来定义可重用组件/小部件的样式，使用更少的资源。它在不到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();
}

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

---

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

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

上面的示例会导致一个错误：

SyntaxError: .header is undefined...

而且它应该是在.coolWidget（或其他任何地方）中实际定义的no.header（）。 可以通过在#componentName中的某个位置为.text和.header提供“默认”定义来修复此问题。 例如，如果将.loadMixins（）修改为：

然后，该示例编译为OK，所有文本/标题属性将按预期被覆盖

---

---

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

Hi Max！非常感谢您的回答–您是对的，我的示例输入错误–loadMixins（）mixin应该设置默认值。刚刚做了一个例子，看起来他们使用了1.3.x，所以覆盖是有效的。但是，如果您在1.4.x中运行它，那么就没有骰子了：（我很想找到另一种方法来实现这一点。当然，我上面的答案是关于1.4.x（我使用lescc 1.4.2和1.5.0-b2进行了测试），其中代码仍然有效（没有理由不这样做）.先生，你完全正确-我只是在不同的环境中运行了这个程序，它起了作用。看起来我有一个特定于环境的问题。非常感谢您的帮助和所有时间！

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

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