// https://github.com/jgthms/bulma/issues/451#issuecomment-331758839 $sizeUnit: rem; $marginKey: 'm'; $paddingKey: 'p'; $separator: '-'; $sizes: ( ('none', 0), ('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')), ('x', ('right', 'left')), ('y', ('top', 'bottom')) ); @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}#{$posKey}#{$separator}#{$sizeKey} { @each $entry in $posValue { margin-#{$entry}: sizeValue($sizeKey, $sizeValue); } } .#{$paddingKey}#{$posKey}#{$separator}#{$sizeKey} { @each $entry in $posValue { padding-#{$entry}: sizeValue($sizeKey, $sizeValue); } } } }