Spyke

Syndicated from the fediverse. Read and engage on the original instance.

View original on jlai.lu
css·CSSbypoudlardo

Need help compiling SCSS to CSS

For a project, I had to compile SCSS code to CSS. Everything seemed to work, except for a @for loop similar to this :

$base-color: #036;

@for $i from 1 through 3 {
  ul:nth-child(3n + #{$i}) {
    background-color: lighten($base-color, $i * 5%);
  }
}

This loop hasn't been compiled at all to CSS, as CSS does not loop though selectors. But is there a way to loop this code with JavaScript ?

View original on jlai.lu
2
Comments5

5 replies

burtek
programming.dev

Not sure what issue you had, but the very same code from OP just worked for me on the site linked in the other comment...

2
poudlardoreply
jlai.lu

Yes, I should have shown the real @for loop, because in my case the loop number is unknown (it's a variable), so the compiler has trouble compiling it.

I didn't post this is in the right place. I basically need JavaScript code to replicate this SCSS loop in a way that I can loop though this element with an unknown number of times (a variable that can change according to an array.length for instance).

1
tinker_jamesreply
programming.dev

I just did a really silly loop (I'm on my phone) and it seemed to work.

@for $t from 1 through 2 {
  .a-#{$t} {
    color: red;
   }
}
1

You reached the end

Need help compiling SCSS to CSS | Spyke