bootstrap-4-grid-styl/stylus/bootstrap/utilities/_spacing.styl

Bootstrap 4 grid system and layout utilities using Stylus

// stylelint-disable declaration-no-important

// Margin and Padding
$mp = {margin: "m", padding: "p"}

for $breakpoint in keys($grid-breakpoints)
  $infix = breakpoint-infix($breakpoint, $grid-breakpoints)
  +media-breakpoint-up($breakpoint)
    for $prop, $abbrev in $mp
      for $size, $length in $spacers
        .{$abbrev}{$infix}-{$size}
          {$prop}: $length !important;
        .{$abbrev}t{$infix}-{$size},
        .{$abbrev}y{$infix}-{$size}
          {$prop}-top: $length !important
        .{$abbrev}r{$infix}-{$size},
        .{$abbrev}x{$infix}-{$size}
          {$prop}-right: $length !important
        .{$abbrev}b{$infix}-{$size},
        .{$abbrev}y{$infix}-{$size}
          {$prop}-bottom: $length !important
        .{$abbrev}l{$infix}-{$size},
        .{$abbrev}x{$infix}-{$size}
          {$prop}-left: $length !important

    // Some special margin utils
    .m{$infix}-auto
      margin: auto !important
    .mt{$infix}-auto,
    .my{$infix}-auto
      margin-top: auto !important
    .mr{$infix}-auto,
    .mx{$infix}-auto
      margin-right: auto !important
    .mb{$infix}-auto,
    .my{$infix}-auto
      margin-bottom: auto !important
    .ml{$infix}-auto,
    .mx{$infix}-auto
      margin-left: auto !important