- var i = 1;
.grid
  while i <= 20
    section(class="random-"+i)= i++

@for $i from 1 through 20 {
  .random-#{$i} {
    background: rgb(random(255), random(255), random(255));
  }
}

body {
  background: black;
  font-family: sans-serif;
}

.grid {
  display: grid;
  grid-gap: .3rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

section {
  display: grid;
  place-items: center;
  color: white;
  font-size: 3rem;
  text-shadow: 1px 1px 2px black; 
  padding: 2rem;
}

section:nth-child(4n + 2) {
  color: red;
}

section:nth-child(3n):not(:nth-child(6)) {
  color: yellow;
}