scss 通过@for循环动态创建多个class

项目中有些全局的.scss文件中一些关于设置width的class，如下：

.w50{
    width:50px;
}
.w60{
    width:60px;
}
.w70{
    width:70px;
}
.w80{
    width:80px;
}
.w90{
    width:90px;
}
.w100{
    width:100px;
}
.w110{
    width:110px;
}
.w120{
    width:120px;
}
.w130{
    width:130px;
}
.w140{
    width:140px;
}
.w150{
    width:150px;
}
.w160{
    width:160px;
}
.w170{
    width:170px;
}
.w180{
    width:180px;
}
.w190{
    width:190px;
}
.w200{
    width:200px;
}
.w210{
    width:210px;
}
.w220{
    width:220px;
}
.w230{
    width:230px;
}
.w240{
    width:240px;
}
.w250{
    width:250px;
}
.w260{
    width:260px;
}
.w270{
    width:270px;
}
.w280{
    width:280px;
}
.w290{
    width:290px;
}
.w300{
    width:300px;
}
.w310{
    width:310px;
}
.w320{
    width:320px;
}
.w330{
    width:330px;
}
.w340{
    width:340px;
}
.w350{
    width:350px;
}
.w360{
    width:360px;
}
.w370{
    width:370px;
}
.w380{
    width:380px;
}
.w390{
    width:390px;
}
.w400{
    width:400px;
}
.w410{
    width:410px;
}
.w420{
    width:420px;
}
.w430{
    width:430px;
}
.w440{
    width:440px;
}
.w450{
    width:450px;
}
.w460{
    width:460px;
}
.w470{
    width:470px;
}
.w480{
    width:480px;
}
.w490{
    width:490px;
}
.w500{
    width:500px;
}

非常长的代码，后续如果有需要可能还需要加入更多，这样不是很方便维护，于是改用scss中的for循序实现动态生成多个class

@for $i from 1 through 100 {
  .w#{($i * 10)} {
    width: 10px * $i;
  }
}

这里只有几行代码就实现了 w10--w1000的class对应width的设置，这样如果后续想增加更多，只需要调整对应的循环值即可

还有一种下面的方式 通过@for配合range来实现范围内的数据遍历，但是我本地语法检测工具会报错，所有没法验证是否能够动态创建
range函数可以生成一个指定范围的数字序列，第三个参数是步长

@for $i in range(10, 1001, 10) {
    .w#{$i} {
      width: $i * 1px ;
    }
   }