Jekyll将SASS变量导出为Javascript变量

我有一个项目UI工具包，就像使用Jekyll和Jekyll资产的Bootstrap build一样，我试图了解是否可以创建Jekyll插件或Jekyll资产插件，以便将所有SASS变量从_variables.scss文件哑到Javascript文件中的对象变量。我们的想法是将：

// _variables.scss
$white: #FFF;
$black: #000;
$red: #FF0;

进入

值得一提的是，此转换的javascript文件稍后将通过Jekyll资产构建过程导入其他javascript文件：

// app.js
//= include _variables.js
console.log (window.appVars);

---

你不需要一个插件来做这件事。 最简单的方法是将jekyll变量传递给sass和js文件

杰基尔变量 在这里，我使用来自_config.yml的配置变量，但您也可以使用来自_数据文件的变量

# _config.yml
custom_vars:
  text_color: red
  background_color: '#ddd'

Sass文件 在标准的jekyll设置中，有一个引导文件assets/main.css，用于导入所需的所有内容。 似乎您无法@import包含前置内容和变量的sass文件，因此，您必须在@import station之前获取boostrap文件中的变量

// assets/main.css
{%- for var in site.custom_vars %}
${{ var[0] }}: {{ var [1] }};
{%- endfor %}
@import "whatever";

Js文件 指示jekyll通过添加前置内容来处理您的文件：

---
---
// assets/script.js
(function(){
    window.appVars = {
        {%- for var in site.custom_vars %}
          {{ var[0] }}: '{{ var [1] }}'
          {%- unless forloop.last %},{% endunless %}
        {%- endfor %}
    }
})();

---

你好，大卫，谢谢你的帮助，很抱歉延迟了我的反馈。你的答案是伟大的，当它涉及到集中所有变量在杰基尔水平，然后哑它在任何文件。不幸的是，在我的例子中，我可能没有正确地解释这个问题，我需要处理这些变量，以便获得如下结果：$color master light:mix$color master，FFF，16%！违约或$table边框颜色：rgba0,0,0,0.07！违约甚至$var-1:1$var-2:$var-1+2；变量名在{var[0]}中，变量值在{{var[1]}中。我不明白什么不起作用。David，如果我只是将所有内容作为字符串哑放到文件中，那么像mix$color master，FFF，16%这样的值将导致javascript启动错误，因为它不知道如何处理它。另一方面，我需要将SASS文件的方法/函数解析为computed，而不是转换为CSS，以便考虑所有逻辑。

---
---
// assets/script.js
(function(){
    window.appVars = {
        {%- for var in site.custom_vars %}
          {{ var[0] }}: '{{ var [1] }}'
          {%- unless forloop.last %},{% endunless %}
        {%- endfor %}
    }
})();