scss如何循环创建样式

在项目初始阶段，我们会先制定css公共样式。而在css中单独定义class时，会因为多种相同样式但值不同，如下所示

.f12{ font-size:12px };
.f13{ font-size:13px };
.f14{ font-size:14px };
.f15{ font-size:15px };

直接导致文件体量增大和重复劳动，我们只需要使用sass通过简单的数学计算和循环创建即可完成这项工作

// common.scss 文件
@use 'sass:math'; //引入math函数

// 字体大小 12px~60px
// 生成class .f12 .f24 .f33
@for $i from 12 to 61 {
  .f#{$i} {  font-size: #{$i}px;  }
}

// 像素宽度 5px~200px
// 生成class .w5 .w10 .w15
@for $i from 1 to 41 {
  .w#{$i*5} {
    width: #{$i * 5}px;
  }
}

// 百分比宽度 1%~100%
// 生成class .w3p .w10p .w100p
@for $i from 1 to 101 {
    .w#{$i}p {
        width: math.div($i, 100) * 100%;   //math.div(a,b) 整除函数
    }
}

// margin-top 1px~100px
// 生成class .mt10 .mt5 .mt1
@for $i from 1 to 101 {
  .mt#{$i} {
    margin-top: #{$i}px;
  }
}