scss的高级用法——循环

周末愉快呀！一起来学一点简单但非常有用的css小知识。

最近在一个项目中看到以下css class写法：

了解过tailwind css或者unocss的都知道，从命名就可以看出有以下样式：

• font-size: 30px
• margin-left: 5px;
• margin-top: 10px;

于是我就去看它的package.json，竟然都没有使用。

难道是自己定义的？再在代码中全局搜索font30、ml5，也都没有搜到。

于是我试着搜了一下mt、ml，搜到了这个：

这是scss的for循环语法，以前只稍微了解过，却从不知道有什么用。

看到这个，不禁感叹，实在是妙啊！

scss for循环有两种使用方式：

1. @for $i from 开始值 through 结束值 包含结束值
2. @for $i from 开始值 to 结束值 不包含结束值

以上代码使用了第一种，意思是从1循环到35，$i是每一项的值，1到35，通过#{$i}读取值并拼接class和属性值。分别定义了margin和padding上右下左四个方向的类样式。

在playground中试试看：