CSS

542 readers

1 users here now

founded 2 years ago

MODERATORS

submitted 2 years ago* (last edited 2 years ago) by [email protected] to c/css

5 comments fedilink hide all child comments

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 ?

you are viewing a single comment's thread
view the rest of the comments

[–] tinker_james 1 points 2 years ago (1 children)

How are you compiling?

[–] [email protected] 1 points 2 years ago (1 children)

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

[–] tinker_james 1 points 2 years ago

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;
   }
}