我可以在 Jade 循环中使用 SASS 变量吗？答案

【问题标题】：Can I use SASS variables in Jade loops?我可以在 Jade 循环中使用 SASS 变量吗？
【发布时间】：2017-04-14 18:31:12
【问题描述】：

我有一个颜色数组存储在一个 SASS 变量 $colors 我正在使用 Styledown，我可以在同一页面上使用 SASS 和 Jade 来生成一些不错的文档。

唯一的主要缺陷是我不能在 Jade 中使用 SASS 变量，这会产生大量重复代码。

例如

我有一个颜色数组存储在一个名为 $colors 的 SASS 变量中，并通过它循环生成相关的 CSS。

我希望能够遍历相同的$colors 变量并使用 Jade（或其他语言，如果可能的话..）生成一些相关的 HTML 示例，但我不能。为了做到这一点，我必须创建一个 Jade-$colors 数组。如果 SASS-$colors 发生变化，我必须记住也要更改 Jade-$colors 的内容。

有解决办法吗？即使从 Styledown 迁移到其他框架也可以。只要我可以在同一个文件中生成 CSS 和 HTML 并使用在我的 CSS 和 HTML“循环”之间共享的变量

谢谢！

【问题讨论】：

标签： html css sass pug

【解决方案1】：

您可以使用sass-extract 工具将您的 sass 颜色数组作为 JSON 获取，然后将结果作为jade locals 传递给jade.renderFile() 以便基于它生成html。

不幸的是，由于how jade is rendered in styledown，它似乎不支持将本地人传递到模板中。

这是一个简单的示例，可以生成您所要求的内容，但没有 styledown。也许它可以为您找到足够的灵感来找到适用于您的特定情况的解决方案。 Styledown 也有可能被扩展以支持这种渲染。

style.scss

$colors: #ff0000 #00ff00 #0000ff;

template.jade

p My Colors

each color in $colors.value
  div(style="color: #{color.value.hex}")
    p color: #{color.value.hex}

index.js

const sassExtract = require('sass-extract');
const jade = require('jade');

const style = sassExtract.renderSync({ file: './style.scss' });
const html = jade.renderFile('./template.jade', style.vars.global);

console.log(html);

输出

<p>My Colors</p>

<div style="color: #ff0000">
  <p>color: #ff0000</p>
</div>
<div style="color: #00ff00">
  <p>color: #00ff00</p>
</div>
<div style="color: #0000ff">
  <p>color: #0000ff</p>
</div>

【讨论】：