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
收藏
暂无评论信息
- 相关文章
- 文章推荐
-
Docker 常用命令
docker目前代替虚拟机使用的一个容器,灵活好用。
-
亚马逊推出“无需收银员”的新技术,以此帮助品牌和广告商提高销量
北京时间 6 月 30 日早间消息,据报道,亚马逊发明了一种无需收银员的技术,可以加快人们去杂货店或便利店的速度。现在,该公司希望利用这个跟踪系统来帮助品牌和广告商提高销量。&
-
娱美德旗下MMORPG手游《传奇4》将推出新PVP玩法"比奇掠夺"&
《传奇4》推出新门派PVP玩法!韩国首尔2022年6月29日 /美通社/ -- 《传奇4》(MIR4)的新PVP玩法比奇掠夺(Bicheon Heist)于2022年6月28日推出。
-
git:如何管理本机的多个ssh密钥(多个远程仓库账号)
如果我们电脑上已经存在了一个ssh key,那么我们需要在我们电脑上生成第二个你想在本电脑上使用的id_rsa,使用命令:ssh-keygen -t rsa -C "你的github账号"。
- 点击排行
- 站长推荐
- 猜你喜欢
- “先买后付”独角兽 Klarna 寻求新一轮融资,估值或只有 60 亿美元
- 这场强制开发者“应用内支付”的纷争,谷歌同意给9000万美元
- css自定义滚动条样式
- 群晖nas docker安装bitwarden,并实现ssl证书,可以访问并能注册登录的问题
- NFT 销售额降至 12 个月新低,6 月约 10 亿美元
- sqlalchemy.exc.ArgumentError: Could not parse rfc1738 URL from string
- Node.js 18 新特性解读
- Web前端:JavaScript的未来——发展趋势和预测
- ModuleNotFoundError: No module named flask._compat
- 美 FCC 成员要求苹果谷歌从应用店中移除 TikTok
- 网站信息
- 站内问答:12篇
- 站内文章:213篇
- 建站时间:已运行1217天
- 备案号: 浙ICP备2022018799号
- 语言:
- English(USA)
- French(FR)
- Chinese(ZH)
无数据