# Loop jekyll variable in SASS

**URL:** <https://talk.jekyllrb.com/t/loop-jekyll-variable-in-sass/8300>\
**Category:** Help\
**Created:** [June 7, 2023, 2:04pm UTC](https://talk.jekyllrb.com/t/loop-jekyll-variable-in-sass/8300 "2023-06-07T14:04:51Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kugeleis](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/kugeleis/32/5364_2.png) [@Kugeleis](https://talk.jekyllrb.com/u/Kugeleis)\
**Post date:** [June 7, 2023, 2:04pm UTC](https://talk.jekyllrb.com/t/loop-jekyll-variable-in-sass/8300/1 "2023-06-07T14:04:51Z")

</div>

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

```auto
/* ----- 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?

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [June 8, 2023, 3:21pm UTC](https://talk.jekyllrb.com/t/loop-jekyll-variable-in-sass/8300/2 "2023-06-08T15:21:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Kugeleis](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/kugeleis/32/5364_2.png) [@Kugeleis](https://talk.jekyllrb.com/u/Kugeleis)\
**Post date:** [June 9, 2023, 1:57pm UTC](https://talk.jekyllrb.com/t/loop-jekyll-variable-in-sass/8300/3 "2023-06-09T13:57:42Z")

</div>

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.