Loop jekyll variable in SASS

Help
1

I try to migrate a jekyll site with CSS to SASS. In CSS this is working

/* ----- per-post colors! ----- */
{% for node in site.posts %}
  {% capture id %}{{ node.id | remove:'/' | downcase }}{% endcapture %}
  {% capture bg %}{% if site.colors[node.bg] %}{{ site.colors[node.bg] }}{% else %}{{ node.bg }}{% endif %}{% endcapture %}
  {% capture fg %}{% if site.colors[node.color] %}{{ site.colors[node.color] }}{% else %}{{ node.color }}{% endif %}{% endcapture %}
  nav .p-{{id}} { border-color: {{ bg }}; }
  #{{id}} { background-color: {{ bg }} !important; color: {{ fg }}; }
  #{{id}} a { color: {{ fg }}; }
  #{{id}} .sectiondivider { color: {{ bg }}; }
{% endfor %}

How to write this correctly for SASS. I left out the “;” but it’s not processed (and no error appears)? How to make sure the indentation is correct? Schuld I rather use SCSS?

2

in which file are you doing this?

in order to process liquid code the file needs to have front matter - with scss files I think this is a problem unless it is in the main.scss file which is outside the sass folder. You can then do something with variables I think.

If you are not inside a scss file in the sass directly I don’t think writing sass will work? like if you are just on some page.html and use that code I don’t think the sass will compile.

1 Like
3

All jekyll logic is in the main folder (to be processed by liquid).
Anyway, I changed the file to SCSS and it worked. I guess to get indentation correct with this logic is hard. Although I find SASS nicer to read, SCSS is more robust here.

2 Likes