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
收藏
暂无评论信息
- 相关文章
- 文章推荐
-
git:如何管理本机的多个ssh密钥(多个远程仓库账号)
如果我们电脑上已经存在了一个ssh key,那么我们需要在我们电脑上生成第二个你想在本电脑上使用的id_rsa,使用命令:ssh-keygen -t rsa -C "你的github账号"。
-
jQuery 3.0正式发布
jQuery 基金会刚刚发布了该 Java 框架的 3.0 版本,并且首次抛弃了对老旧的 IE 浏览器的支持。jQuery 3.0 的工作始于 2014 年 10 月,其最初目标是在 2.0 版本之上进行完善,并和遥远的 1.0 版代码说再见——因为要兼容 IE 的缘故,其已经臃肿不堪。jQuery 2.0 已经与 1.0 版本完全不兼容,而 3.0 也将继续这一路线。
-
Node 配置sequelize + mysql,根据模型自动创建数据库表
研究了一下午的node + sequelize + mysql。
-
亚马逊推出“无需收银员”的新技术,以此帮助品牌和广告商提高销量
北京时间 6 月 30 日早间消息,据报道,亚马逊发明了一种无需收银员的技术,可以加快人们去杂货店或便利店的速度。现在,该公司希望利用这个跟踪系统来帮助品牌和广告商提高销量。&
- 点击排行
- 站长推荐
- 猜你喜欢
- 网站信息
- 站内问答:12篇
- 站内文章:203篇
- 建站时间:已运行798天
- 备案号: 浙ICP备2022018799号
- 语言:
English(USA)
French(FR)
Chinese(ZH)
无数据