Vuesax: Margin and padding helper classes

[grali]

Maybe some margin and padding helpers would be nice for this amazing design. Here is an example:

$spaceamounts: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100);
$sides: (top, bottom, left, right);

@each $space in $spaceamounts {
  @each $side in $sides {
    .m-#{str-slice($side, 0, 1)}-#{$space} {
      margin-#{$side}: #{$space}px !important;
    }

    .p-#{str-slice($side, 0, 1)}-#{$space} {
      padding-#{$side}: #{$space}px !important;
    }
  }
}

[luisDanielRoviraContreras]

This excellent to be able to do a PR on this is a very good thanks for the contribution

[grali]

Sure! No problem at all! This is an awesome package, by the way!

[CheyenneForbes]

any updates on this being official?

[CheyenneForbes]

it would be handy to have some "all sides", negative margins, height and width also

$sides: (top, bottom, left, right);
$amounts: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100);

@each $amount in $amounts {
  .m-neg#{$amount} {
    margin: -#{$amount}px !important;
  }
  .m-#{$amount} {
    margin: #{$amount}px !important;
  }

  .p-#{$amount} {
    padding: #{$amount}px !important;
  }

  @each $side in $sides {
    .m-#{str-slice($side, 0, 1)}-neg#{$amount} {
      margin-#{$side}: -#{$amount}px !important;
    }
    .m-#{str-slice($side, 0, 1)}-#{$amount} {
      margin-#{$side}: #{$amount}px !important;
    }

    .p-#{str-slice($side, 0, 1)}-#{$amount} {
      padding-#{$side}: #{$amount}px !important;
    }
  }
}

@each $amount in $amounts {
  .h-#{$amount} {
    height: #{$amount}% !important;
  }

  .w-#{$amount} {
    width: #{$amount}% !important;
  }
}