如何使用scss循环来解决margin的设置问题

最新推荐文章于 2024-09-22 21:48:02 发布

马学君

最新推荐文章于 2024-09-22 21:48:02 发布

阅读量895

点赞数

文章标签： css vue.js 组件化

本文链接：https://blog.csdn.net/weixin_43448394/article/details/121594151

版权

前言：在后台管理系统中，我们常常会遇到要设置margin，padding，怎样用scss来将这些样式写成公用的方便组件页面的调用，我们可以用scss循环来解决这个问题.

$margin-pixel:10,20
$margin-position:top,right,bottom,left
$margin-class:'t','r','b','l';
@each $item in $margin-pixel {
   @each $p in $margin-position {
     $index: index($margin-bottom, $p);
     $class: nth($margin-position, $index);
     .m#{$class}#{$item} {
       margin-#{$p} {
           margin-#{$p}:$item + px;
       }
     }
   }
/*mr10表示margin-right:10px,其他样式依次类推*/