Get another random number in SCSS loop for loop

I'm trying to generate a random number on each iteration of a for loop in SCSS, however, it just returns the same number on the DOM load for all elements oriented in the loop. I'm sure my syntax is correct, but clearly not!

Premises: I am building a brick wall and applying a different brick texture / image to each brick through the SCSS loop. I am trying to apply a random background image for 16 elements with a potential of 6 background images to choose from. My SASS is version 3.4.14.

** scss -v Sass 3.4.14 (Selective Steve) **

@for $i from 1 through 6 {
  &.front:nth-child(#{$i}), &.back:nth-child(#{$i}) {
    $brick-bg: '../image/brick' + random(6) + '.jpg';
    background-image: url($brick-bg);
    background-size: 100% 100%;
  }
}
      

Run codeHide result


+3


source to share





All Articles