Generate indexed lists in SASS

GeneratedIndexCss.css

ul li {
  list-style: none;
}

ul li:nth-child(1):before, ul li:nth-child(1):after {
  display: block;
  color: red;
}
ul li:nth-child(1):before {
  content: "one > ";
  float: left;
  padding-right: 2em;
}
ul li:nth-child(1):after {
  float: left;
  content: "1";
  padding-right: 2em;
}

ul li:nth-child(2):before, ul li:nth-child(2):after {
  display: block;
  color: red;
}
ul li:nth-child(2):before {
  content: "two > ";
  float: left;
  padding-right: 2em;
}
ul li:nth-child(2):after {
  float: left;
  content: "2";
  padding-right: 2em;
}

ul li:nth-child(3):before, ul li:nth-child(3):after {
  display: block;
  color: red;
}
ul li:nth-child(3):before {
  content: "three > ";
  float: left;
  padding-right: 2em;
}
ul li:nth-child(3):after {
  float: left;
  content: "3";
  padding-right: 2em;
}

GeneratedIndexScss.scss

ul{
  li{
    list-style: none;
  }
}

$items: 'one', 'two', 'three'; // Define your list items
$i : 0; // Set list item number to 0



@each $item in $items{ 
$i : $i + 1 ; // On each items, increment $i
   
ul{
  li{
    
    &:nth-child(#{($i)}){
      
        &:before,&:after{
          display: block;
          color: red;
        }
        &:before{ 
          content: $item + ' > ';
          float: left;
          padding-right: 2em;
        }
        &:after{ 
          float:left;
          content:''+$i+'';
          padding-right: 2em;
        }
      }
    }
  }
}