1

Is there a way to use random function into a selector in sass? something like this

span {               
   &:nth-child(random(10)) {
      opacity: 1;
   }
}
Fernando Poli
  • 41
  • 1
  • 5
  • @MisirJafarov No it doesn't, because that examples are for properties, not for a selector. – Fernando Poli Feb 10 '20 at 13:41
  • oh sorry, please check out my answer – TheMisir Feb 10 '20 at 13:44
  • 3
    The biggest issue for this script is once the CSS is compiled, the random number will no longer be random. It will be whatever value is compiled at run time. So you shouldn't expect it to change once it's compiled - if it compiles with a `4`, it will be a `4` until you recompile. You should probably use a CSS variable instead if you need it to be completely random. You'll also need JS. https://css-tricks.com/random-numbers-css/ – disinfor Feb 10 '20 at 13:51
  • 1
    If you want a random value every time (e.g. each time a transition plays), look into setting CSS variables from JavaScript – djjeck Mar 02 '23 at 00:31

1 Answers1

4

Try out this code:

span {
  &:nth-child(#{random(10)}) {
    opacity: 1;
  }
}

Here's the result:

screenshot

You can read more about interpolation from this article.

TheMisir
  • 4,083
  • 1
  • 27
  • 37
  • 1
    This really isn't a sass variable. It's interpolation: https://sass-lang.com/documentation/interpolation – disinfor Feb 10 '20 at 13:49