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
random for-loop sass


source to share


No one has answered this question yet

See similar questions:

ten
SASS: randomly select a background image from a list

or similar:

3324
How to generate random integers in a specific range in Java?
1799
Generating random integers in JavaScript within a specific range?
1758
How do I generate a random int?
1710
What's the difference between SCSS and Sass?
1597
Generating a random number between two numbers in JavaScript
771
How to get a random number in Ruby
724
Generating random numbers in Objective-C
662
Random number generator only generates one random number
615
Get random element from JavaScript array
376
Getting random numbers in Java



All Articles
Loading...
X
Show
Funny
Dev
Pics