scss自動生成margin padding邊距

惠鹏曦發表於2024-06-05
// 自動生成一個margin padding的css函式 使用ml-20 代表margin-leftt: 20px
$directions:('t': 'top', 'b': 'bottom', 'l': 'left', 'r': 'right');
$dimensions:('p': 'padding', 'm': 'margin');
//獲取padding margin間隔
@each $dim in $dimensions {
  //迴圈四個方向
  @each $dir in $directions {
    @for $i from 1 through 50 {
      $size: $i*1;
      .#{nth($dim,1)}#{nth($dir,1)}-#{$size} {
        #{nth($dim,2)}-#{nth($dir,2)}: #{$size}px;
      }
    }
  }
}

  

相關文章