JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<ul>
  <li data-item="1">one</li>
  <li data-item="2">two</li>
  <li data-item="3">three</li>
  <li data-item="4">four</li>
  <li data-item="5">five</li>
  <li data-item="6">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 */