scss基础遍历通用样式,可以再项目中直接使用。
分类专栏: Css&
简介 创建_common.scss ,复制进去,就可以在main.js进行引入,在标签中使用pt10 ,就有效果了,很好用,很方便。
<p>$spacer: 10;</p><p>$spacers2: () !default;</p><p>$utils2: () !default;</p><p>$spacers: map-merge($map1:(</p><p> 0: 0,</p><p> 1: 1 * $spacer,</p><p> 2: 2 * $spacer,</p><p> 3: 3 * $spacer,</p><p> 4: 4 * $spacer,</p><p> 5: 5 * $spacer,</p><p> 6: 6 * $spacer,</p><p> 7: 7 * $spacer,</p><p> 8: 8 * $spacer,</p><p> 9: 9 * $spacer,</p><p> 10: 10 * $spacer</p><p>), $map2: $spacers2);</p><p><br></p><p>$utils: map-merge($map1: (</p><p> ml: (</p><p> property: margin-left,</p><p> values: $spacers</p><p> ),</p><p> mr: (</p><p> property: margin-right,</p><p> values: $spacers</p><p> ),</p><p> mt: (</p><p> property: margin-top,</p><p> values: $spacers</p><p> ),</p><p> mb: (</p><p> property: margin-bottom,</p><p> values: $spacers</p><p> ),</p><p> mlr: (</p><p> property: margin-left margin-right,</p><p> values: $spacers</p><p> ),</p><p> mtb: (</p><p> property: margin-top margin-bottom,</p><p> values: $spacers</p><p> ),</p><p> pl: (</p><p> property: padding-left,</p><p> values: $spacers</p><p> ),</p><p> pr: (</p><p> property: padding-right,</p><p> values: $spacers</p><p> ),</p><p> pt: (</p><p> property: padding-top,</p><p> values: $spacers</p><p> ),</p><p> pb: (</p><p> property: padding-bottom,</p><p> values: $spacers</p><p> ),</p><p> plr: (</p><p> property: padding-left padding-right,</p><p> values: $spacers</p><p> ),</p><p> ptb: (</p><p> property: padding-top padding-bottom,</p><p> values: $spacers</p><p> )</p><p>), $map2: $utils2);</p><p>@each $key, $value in $utils {</p><p> // 获取这里的$values: (0:1,1:8px,2:16px,...) 这里四个$key的values, 得到四个$value;</p><p> $values: map-get($map: $value, $key: values);</p><p> // 遍历 这里的$values: (0:1,1:8px,2:16px,...)</p><p> @each $item-key, $item-value in $values {</p><p> $properties: map-get($map: $value, $key: property);</p><p> .#{$key}#{$item-value} {</p><p> @each $property in $properties {</p><p> #{$property}: $item-value + px !important;</p><p> }</p><p> }</p><p> }</p><p>}</p>
分享到:
转载:
喜欢 1
收藏
暂无评论信息
- 相关文章
- 点击排行
- 站长推荐
- 猜你喜欢
- 2022清华五道口全球金融论坛----广州峰会(第七届)成功举办&
- 针对单个 js 文件禁用 ESLint 语法校验
- Android Virtual运行提示进程终止
- docker之清理容器、镜像、数据卷和网络
- Node 配置sequelize + mysql,根据模型自动创建数据库表
- javascript 时钟翻牌效果
- 马斯克“悔婚”,Twitter 告知员工“不要评论”
- sony微单拍摄作品 开启FTP实时传输到群晖nas解决方案
- 美国芯片大涨价且难以交货,消息称欧美部分电信客户已转单联发科、瑞昱等
- Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by serv
- 网站信息
- 站内问答:12篇
- 站内文章:207篇
- 建站时间:已运行917天
- 备案号: 浙ICP备2022018799号
- 语言:
English(USA)
French(FR)
Chinese(ZH)
无数据