首页 前端知识 scss的高级用法——循环

scss的高级用法——循环

2024-03-21 15:03:23 前端知识 前端哥 460 768 我要收藏

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

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

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

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

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

难道是自己定义的?再在代码中全局搜索font30ml5,也都没有搜到。

于是我试着搜了一下mtml,搜到了这个:

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

看到这个,不禁感叹,实在是妙啊!

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

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

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

在playground中试试看:

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4015.html
标签
scss
评论
发布的文章

jQuery和CSS选择器的使用

2024-04-15 09:04:55

HTML前端表单校验的方法

2024-04-15 09:04:46

使用jQuery写一个注册界面

2024-04-15 09:04:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!