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