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

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