是否可以在Pelican的Sass / SCSS中使用Jinja2模板逻辑?

时间:2019-03-28 22:12:34

标签: sass jinja2 static-site pelican

第一个问题-感谢(一直)纠正我的错误步骤。 :)

我正在尝试将Pelican Jinja2模板逻辑(使用pelicanconf.py文件中声明的变量)应用于我的SCSS文件,但无法正常工作,因为SCSS文件在Pelican有机会在触摸它们之前被编译生成站点。

# pelicanconf.py

THEME_COLORS = [
                {
                    'name': '$color-white',
                    'hex' : '#FFFFFF'
                },
                {
                    'name': '$color-darkgray',
                    'hex' : '#484A47'
                },
                {
                    'name': '$color-lightgray',
                    'hex' : '#D1D5DE'
                },
                {
                    'name': '$color-teal',
                    'hex' : '#5C6D70'
                },
                {
                    'name': '$color-rust',
                    'hex' : '#A37774'
                },
                {
                    'name': '$color-red',
                    'hex' : '#E88873'
                }
]
// _variables.scss

{% if THEME_COLORS %}
    {% for color in THEME_COLORS %}

    {% for color_name, color_hex in color.items() %}

      {% if color_name|lower|truncate(length=1, killwords=True, end='') == '$' 
        and color_hex|lower|truncate(length=1, killwords=True, end='') == '#' %}

        {% set $color_name = color_name %}
        {% set $color_val = color_hex %}

        {{ $color_name }} : {{ $color_val }};

        {% endif %}

    {% endfor %}

    {% endfor %}
{% endif %}

当我尝试编译SCSS时,(未料到)由于未应用Pelican逻辑,我收到以下错误消息:

{
  "status": 1,
  "file": "path/to/_variables.scss",
  "line": 7,
  "column": 3,
  "message": "Invalid CSS after \"*/\": expected 1 selector or at-rule, was \"{% if THEME_COLORS \"",
  "formatted": "Error: Invalid CSS after \"*/\": expected 1 selector or at-rule, was \"{% if THEME_COLORS \"\n        on line 7 of path/to/_variables.scss\n        from line 18 of themes/martian/static/css/sass/main.scss\n>> */\r\n   --^\n"
}

我希望最终得到这样的结果:

// _variables.scss

$color-white           : #FFFFFF;
$color-darkgray        : #484A47;
$color-lightgray       : #D1D5DE;
$color-teal            : #5C6D70;
$color-rust            : #A37774;
$color-red             : #E88873;

有没有办法做到这一点,还是一个坏主意?

0 个答案:

没有答案