scss 循环出一套 margin padding的类名及值

确保项目能使用scss

然后创建一个名为  total.scss  的scss样式文件

将以下代码放入

 

$spacing-types: (                //类型
  m: margin,
  p: padding
);
$spacing-directions: (          //位置
  t: top,
  b: bottom,
  l: left,
  r: right
);

$spacing-base-size : 10px;      //基数
$spacing-sizes: (               //需要的边距可以添加
    0: 0,
    1: 1,
    2: 2,
    3: 3,
    4: 4,
    5: 5
  );
  
//   循环出 margin 与 padding 的各类值

  @each $typeKey, $type in $spacing-types {
    // m-1{margin:10px} || p-5{padding:50px}
    @each $sizeKey, $size in $spacing-sizes {
      .#{$typeKey}-#{$sizeKey} {
        #{$type}: $size * $spacing-base-size;
      }
    }
    // mx-1{marfin-left:10px;marfin-right:10px} || px-5{padding-left:50px;padding-right:50px;}
    @each $sizeKey, $size in $spacing-sizes {
      .#{$typeKey}x-#{$sizeKey} {
        #{$type}-left: $size * $spacing-base-size;
        #{$type}-right: $size * $spacing-base-size;
      }
    }
  
    // my-1{marfin-top:10px;marfin-bottom:10px} || py-5{padding-top:50px;padding-bottom:50px;}
    @each $sizeKey, $size in $spacing-sizes {
      .#{$typeKey}y-#{$sizeKey} {
        #{$type}-top: $size * $spacing-base-size;
        #{$type}-bottom: $size * $spacing-base-size;
      }
    }
    // mt-1 { margin-top: 10px } || pb-5{paddding-bottom:50px;}||ml-2{margin-left:20px}||pr-4{padding-right:40px}
    @each $directionsKey, $directions in $spacing-directions {
      @each $sizeKey, $size in $spacing-sizes {
        .#{$typeKey}#{$directionsKey}-#{$sizeKey} {
          #{$type}-#{$directions}: $size * $spacing-base-size;
        }
      }
    }
  }

 

 

使用的时候，在main.js文件内引用，

然后直接在 标签的 class 里面添加 对应类名 就可以

例如：

<div class="ml-5">现在就有左外边距50px</div>

<div class="pb-4">现在就有下内边距40px</div>

 

 

// flex布局
//类名  .flex-center-center
$justify:(
left:flex-start,
center:center,
right:flex-end,
between:space-between,
around:space-around
);
$align:(
    top:flex-start,
    center:center,
    bottom:flex-end
);
@each $alignKey,$alignVal in $align{
    @each $justifyKey,$justifyVal in $justify{
        .flex-#{$justifyKey}-#{$alignKey}{
            display: flex;
            justify-content: #{$justifyVal};
            align-items: #{$alignVal};
        }
    }
};


// 边框颜色
//类名  .border-b
$orientation:(
  t:top,
  b:bottom,
  l:left,
  r:right,
);
@each $orientationKey,$orientationVal in $orientation {
  .border-#{$orientationKey}{
    border-#{$orientationVal}:1px solid #E4E4EE;
  }
}