- 网站精华
scss基础遍历通用样式，可以再项目中直接使用。
简介 创建_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
收藏
暂无评论信息