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
收藏
暂无评论信息
- 相关文章
- 文章推荐
-
眼镜试戴的装饰效果
开发眼镜类产品的时候需要使用试戴的功能,这里就有你需要的学习资料哦!
-
Node 配置sequelize + mysql,根据模型自动创建数据库表
研究了一下午的node + sequelize + mysql。
-
乐视官方确认还有 400 多人:消息称员工“没有内卷和 996”,过着“没有老板”的神仙日子
7 月 11 日消息,近期,微博博主 @Fenng 分享了一个冷知识:乐视居然还剩下 400 多人,有不少是五年以上的老员工。这些老员工称“幸福感是很多老乐视人留下来的理由”,没有内卷和 996,没拖欠过留下来的员工的工资,也没停过社保。
-
群辉nas docker容器 配置svn仓库,并实现外网访问
2022-08-11的这一天, 群辉nas到手了, 实现svn仓库外网的访问,折腾了好久。记录一下。
- 点击排行
- 站长推荐
- 猜你喜欢
- 网站信息
- 站内问答:12篇
- 站内文章:210篇
- 建站时间:已运行1038天
- 备案号: 浙ICP备2022018799号
- 语言:
English(USA)
French(FR)
Chinese(ZH)
无数据