在项目初始阶段,我们会先制定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;
}
}