cssstylus

Is this random conditional possible with CSS preprocessor Stylus?

I have a random function in Stylus:

random(min,max)
   return floor(math(0, 'random')*(max - min + 1) + min)

I am using it like this to generate a random z-index on an element:

for i in (1..10) 
   .x{i}
      z-index random(-99, 99)

Now I want a conditional on the same element if the z-index is, for example > 0... Is this possible?

Solution

  • Yes, you can do this by saving this random value to the variable and then reusing it both in condition and at z-index:

    random($min, $max)
  return floor(math(0, 'random') * ($max - $min + 1) + $min)

for $i in (1..10)
  $random_value = random(-99, 99)
  .x{$i}
    z-index: $random_value

    if $random_value > 0
      background: lime