Loops in scss with Nuxt 3 + vite

I try to do it in my code like this: https://codepen.io/miriamsuzanne/pen/aBVNyr.But it not works. Here is my error when I copy that code to my project:

[vite] Internal server error: expected "{".                                                                                                                                                                                                                                           
    ╷
126 │   background: $color;
    │                     ^