周末愉快呀!一起来学一点简单但非常有用的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循环有两种使用方式:
- @for $i from 开始值 through 结束值 包含结束值
- @for $i from 开始值 to 结束值 不包含结束值
以上代码使用了第一种,意思是从1循环到35,$i
是每一项的值,1到35,通过#{$i}
读取值并拼接class和属性值。分别定义了margin
和padding
上右下左四个方向的类样式。
在playground中试试看: