Question

我对于CoffeeScript和Sass来说都是新手，但我正在努力通过他们和Google Polymer的测试项目，以便更熟悉每一个。然而，我对如何设置我的项目感到有些困惑。

在使用Google Polymer custom-elements的示例中，他们让您使用嵌入式Javascript代码来初始化元素，如下所示：

<script>
  Polymer ({
    is: 'id-here'
  });
</script>

这一切都很好，但这不适用于CoffeeScript，我必须在使用前编译成JS。包含这样的东西的最佳做法是什么 -

Polymer
  is: "id-here"
  properties:
    etc

- 在我的项目中使用外部CoffeeScript文件而不是嵌入式Javascript代码？是否最好将外部编译的.js文件加载到我的custom-element中，或者每次使用自定义元素时都尝试加载它？

我也不确定我应该如何将sass与自定义元素一起使用，因为这些也是在使用之前编译的。

非常困惑，任何有关使用编译语言与Google Polymer 的帮助或文档都会受到赞赏，因为谷歌搜索没有任何结果。谢谢！

Answer 1

保持文件分开。单独处理它们。最后将它们组合起来作为构建步骤。

聚合物元素示例：

<dom-module id="foo-bar" assetpath="/">
  <template>
    <link rel="Stylesheet" media="all" href="foo-bar.css" />
    <div>[[formatName(name)]]
    <div>[[employer]]
    <template is="dom-repeat" items="[[addresses]]">
      <div>[[item.street]</div>
      <div>[[item.city]], [[item.state]] [[item.zip]]</div>
    </template>
  </template>
  <script src="foo-bar.js"></script>
</dom-module>

您现在可以使用coffeescript / typescript / etc生成foo-bar.js文件。 Sass / Less / etc用于创建foo-bar.css文件。

在最终版本中，Vulcanize等工具可以内联所有生成的文件。

如何正确使用Google Polymer的coffeescript / sass（编译语言）？

1 个答案: