JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
</ul>

SCSS

/* max list items */
$max-list-items: 50;

/* loop through max list items */
@for $i from 1 through $max-list-items {

  /* current list item index */
  LI:nth-child(#{$i}) {
    
    /* set margin left by index minus 1 multipled by 2 rem */
    margin-left: ( $i - 1 ) * 2rem;
    
  }

}

/* demo list styles */
UL {
  font-family: helvetica;
  font-weight: bold;
  list-style: none;
  padding: 0;
  
  LI {
    margin-bottom: 1rem;
    padding: 1rem;
    color: white;
    background: red;
  }
}

/* demo body styles */
BODY {
  padding: 1rem;
}