Jekyll：在 SCSS 中使用来自 _config.yml 的值

Question

在我的 Jekyll 项目中，我的 _config.yml 文件中有以下内容：

colors:
  - name: red
    hex: '#FF0000'
  - name: yellow
    hex: '#FFFF00'
  - name: blue
    hex: '#0000FF'

在 assets/css/colors.scss 中，我想为以下颜色创建类：

{% for color in site.colors %}
.{{ color.name }} {
  color: {{ color.hex }};
}
{% endfor %}

当我这样做时，出现以下错误：

Error in _assets/css/background-test.scss:6 Invalid CSS after "}": expected selector or at-rule, was "{% for color in..." 
  Liquid Exception: Invalid CSS after "}": expected selector or at-rule, was "{% for color in..." in _includes/head.html, included in _layouts/default.html
jekyll 3.0.1 | Error:  Invalid CSS after "}": expected selector or at-rule, was "{% for color in..."

有没有办法让 Liquid 处理 SCSS 中 _config.yml 文件的值？

Answer 1

如果你想让 Jekyll 处理你的 scss 文件，你必须给它添加一个 front matter。

这个有效：

---
# empty front matter
---
@charset "utf-8";

{% for color in site.colors %}
.{{ color.name }} {
  color: {{ color.hex }};
}
{% endfor %}

Jekyll：在 SCSS 中使用来自 _config.yml 的值

Jekyll: Using values from _config.yml in SCSS

sass

liquid

jekyll