Sass spacing helper

spacing.sass

$sizeUnit: rem
$marginKey: "m"
$paddingKey: "p"
$separator: "-"
$sizes: ("none", 0), ("auto", auto), ("xxs", 0.125), ("xs", 0.25), ("sm", 0.5), ("md", 1), ("lg", 2), ("xl", 4), ("xxl", 8)
$positions: ("t", "top"), ("r", "right"), ("b", "bottom"), ("l", "left")

@function sizeValue($key, $value)
  @return if($key == "none" or $key == "auto", $value, $value + $sizeUnit)

@each $size in $sizes
  $sizeKey: nth($size, 1)
  $sizeValue: nth($size, 2)
  .#{$marginKey}#{$separator}#{$sizeKey}
    margin: sizeValue($sizeKey, $sizeValue) !important
  @if ($sizeKey != "auto")
    .#{$paddingKey}#{$separator}#{$sizeKey}
      padding: sizeValue($sizeKey, $sizeValue) !important

  @each $position in $positions
    $posKey: nth($position, 1)
    $posValue: nth($position, 2)
    .#{$marginKey}#{$posKey}#{$separator}#{$sizeKey}
      margin-#{$posValue}: sizeValue($sizeKey, $sizeValue) !important
    @if ($sizeKey != "auto")
      .#{$paddingKey}#{$posKey}#{$separator}#{$sizeKey}
        padding-#{$posValue}: sizeValue($sizeKey, $sizeValue) !important

// Alias for margin auto horizontaly and verticaly
.mh-auto
  @extend .ml-auto
  @extend .mr-auto
.mv-auto
  @extend .mt-auto
  @extend .mb-auto

With Bulma naming style:

$sizeUnit: rem;
$marginKey: "has-margin";
$paddingKey: "has-padding";
$separator: "-";
$sizes: (
  ("none", 0),
  ("xxs", 0.125),
  ("xs", 0.25),
  ("sm", 0.5),
  ("md", 1),
  ("lg", 2),
  ("xl", 4),
  ("xxl", 8)
);
$positions: (
  ("top", "top"),
  ("right", "right"),
  ("bottom", "bottom"),
  ("left", "left")
);

@function sizeValue($key, $value) {
  @return if($key == "none", 0, $value + $sizeUnit);
}

@each $size in $sizes {
  $sizeKey: nth($size, 1);
  $sizeValue: nth($size, 2);
  .#{$marginKey}#{$separator}#{$sizeKey} {
    margin: sizeValue($sizeKey, $sizeValue);
  }
  .#{$paddingKey}#{$separator}#{$sizeKey} {
    padding: sizeValue($sizeKey, $sizeValue);
  }
  @each $position in $positions {
    $posKey: nth($position, 1);
    $posValue: nth($position, 2);
    .#{$marginKey}#{$separator}#{$posKey}#{$separator}#{$sizeKey} {
      margin-#{$posValue}: sizeValue($sizeKey, $sizeValue);
    }
    .#{$paddingKey}#{$separator}#{$posKey}#{$separator}#{$sizeKey} {
      padding-#{$posValue}: sizeValue($sizeKey, $sizeValue);
    }
  }
}

Thanks, @hellokvn. I'll leave both versions here.

@VictorOtavio @hellokvn 👍 It would be awesome if it would also support responsive modifiers like -mobile, -desktop etc.

FYI, $sizes variable messes with the rest of the Bulma sizes. I changed $sizes to $sizes-margin and works well now.

@VictorOtavio you might want to add some usage examples, although @furey outlined the output in the original thread.

@VictorOtavio @hellokvn we should use !important?

@VictorOtavio @hellokvn how to use bulma's breakpoints?

Awesome. Thanks guys

Great, thanks!

WARNING

This code introduces the issue to Bulma, because it overrides $sizes variable.

jgthms/bulma#2255