Question

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

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

e.g。

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

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

有解决方案吗？即使从Styledown转移到其他框架也没关系。只要我可以在同一个文件中生成CSS和HTML并使用我的CSS和HTML共享的变量＆＃34;循环＆＃34;

谢谢！

Answer 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>

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

1 个答案: