Easiest way to loop the css :nth-child pseudo class by scss

#css #scss #loop #stylesheet

There are couple of way to loop the pseudo class by scss but the while loop make it more easy to understand and the process.

$count: 1;
@while $count < 10+1{
  .classname:nth-of-type(#{$count}){
    width: auto;
  }
    $count: $count+1
}

this output is:


.classname:nth-of-type(1) {
  width: auto;
}

.classname:nth-of-type(2) {
  width: auto;
}

.classname:nth-of-type(3) {
  width: auto;
}

.classname:nth-of-type(4) {
  width: auto;
}

.classname:nth-of-type(5) {
  width: auto;
}

.classname:nth-of-type(6) {
  width: auto;
}

.classname:nth-of-type(7) {
  width: auto;
}

.classname:nth-of-type(8) {
  width: auto;
}

.classname:nth-of-type(9) {
  width: auto;
}

.classname:nth-of-type(10) {
  width: auto;
}

Thanks.