<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

// Create a "guarded" mixin with conditional test
.mixin-loop (@i) when (@i > 0) {
  // Output the current counter
  div:nth-child(@{i})::after {
    content: "@i == @{i}";
    background: hsl(@i * 10, 50%, 50%);
  }
  
  // The mixin calls itself, recursively,
  // until the "@i > 0" condition is no longer met
  .mixin-loop(@i - 1);
}

// Call the mixin with a counter to start the loop
.mixin-loop(36);



// styles...
body {
  align-items: stretch;
  align-content: stretch;
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
}

div {
  display: flex;
  flex: 1 0 auto;
  white-space: nowrap;
  
  &::after {
    align-items: center;
    display: flex;
    flex: 1 0 auto;
    justify-content: center;
    padding: 0.5em 1em;
  }
}