scss 循环的骚操作

今天看别人源码，定义了部分基础css，突然加到20px就没有了，由于使用过tailwind的便捷后。发现这样定义方法会很蠢。

/** 基础通用 **/
.pt5 {
	padding-top: 5px;
}
.pr5 {
	padding-right: 5px;
}
.pb5 {
	padding-bottom: 5px;
}
.mt5 {
	margin-top: 5px;
}
…………// 省略部分

目标页面渲染效果

又无意发现定义的css里面有用到for循环，突发奇想就按想法试了试，效果是成功，解决了传统css定义方法。

项目代码如下，我尝试使用scss编译工具编译了一下.。

这是编译后的效果 两个效果编译行数达到2400+ 。就去官网查for循环的判断语法。于是想到设置步长编译。不得将for循环改成while循环。试了一下@if 效果，发现不能使用%去取余，也没继续查下去了。

这是本效果的源码 和 解析 后的代码。

• 使用for 的代码行数是2450
• 使用while的代码行数是515
  

官方解释 through 与 to 的含义区别：
@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：@for $var from through ，或者 @for $varfrom<start>to<end>，区别在于through与to的含义：当使用through时，条件范围包含<start>与<end>的值，而使用to时条件范围只包含<start>的值不包含<end>的值。另外，$var 可以是任何变量，比如 $i； 和 必须是整数值。