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 :


<span style="color:#323232;">$base-color: #036;
</span><span style="color:#323232;">
</span><span style="color:#323232;">@for $i from 1 through 3 {
</span><span style="color:#323232;">  ul:nth-child(3n + #{$i}) {
</span><span style="color:#323232;">    background-color: lighten($base-color, $i * 5%);
</span><span style="color:#323232;">  }
</span><span style="color:#323232;">}
</span>

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 ?

burtek,

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…

poudlardo,

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).

tinker_james,

How are you compiling?

poudlardo,

Basically I entered all my scss code in this site : wtools.io/convert-scss-to-css

tinker_james,

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


<span style="color:#323232;">@for $t from 1 through 2 {
</span><span style="color:#323232;">  .a-#{$t} {
</span><span style="color:#323232;">    color: red;
</span><span style="color:#323232;">   }
</span><span style="color:#323232;">}
</span>
  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • css@programming.dev
  • DreamBathrooms
  • everett
  • tacticalgear
  • magazineikmin
  • thenastyranch
  • rosin
  • tester
  • Youngstown
  • khanakhh
  • slotface
  • ngwrru68w68
  • kavyap
  • mdbf
  • InstantRegret
  • JUstTest
  • osvaldo12
  • GTA5RPClips
  • ethstaker
  • normalnudes
  • Durango
  • cisconetworking
  • anitta
  • modclub
  • cubers
  • Leos
  • provamag3
  • megavids
  • lostlight
  • All magazines
    •