周末愉快呀！一起来学一点简单但非常有用的css小知识。
最近在一个项目中看到以下css class写法：
了解过tailwind css或者unocss的都知道，从命名就可以看出有以下样式：
font-size: 30pxmargin-left: 5px;margin-top: 10px;
于是我就去看它的package.json，竟然都没有使用。
难道是自己定义的？再在代码中全局搜索font30、ml5，也都没有搜到。
于是我试着搜了一下mt、ml，搜到了这个：
这是
scss的for循环语法，以前只稍微了解过，却从不知道有什么用。
看到这个，不禁感叹，实在是妙啊！
scss的循环用法
scss for循环有两种使用方式：
- @for $i from 开始值 through 结束值 包含结束值
- @for $i from 开始值 to 结束值 不包含结束值
以上代码使用了第一种，意思是从1循环到35，$i是每一项的值，1到35，通过#{$i}读取值并拼接class和属性值。分别定义了margin和padding上右下左四个方向的类样式。
在playground中试试看：
顺便记录一下less的循环
less中没有for循环，是通过自己调自己来达到循环的效果。
margin函数接收两个参数，第一个是循环的最大值，第二个是初始值，初始值默认为1。然后每次调自己的时候，默认值+1，直到小于等于最大值。
class类名的拼接方式和scss一样，属性值的拼接方式略有不同。
还有一种是使用each和range实现循环
